Question

我有两个textarea

<textarea id="area1">Hello how are you</textarea>
<textarea id="area2"></textarea>

我希望将area1值传递给area2并显示，然后设置＆＃34; Hello＆＃34;染成红色，＆＃34;你好吗＆＃34;颜色为绿色

var area1=document.getElementById("area1");
var area2=document.getElementById("area2");

如何在JavaScript中执行此操作？谢谢

Answer 1

要转移文字，您可以使用innerHTML的{{1}}属性：

textarea

这是jsFiddle。

但对于红色部分来说，这将更加困难。

您无法使用2 area2.innerHTML = area1.innerHTML;。您必须创建另一个容器并将其设置为textarea。

以下是一个快速solution，其中第二个元素是textarea而不是div。

虽然我没有设计第二个元素。

textarea

编辑：忘了绿色部分。

Answer 2

这很容易做到。看看下面的代码。

(function(){
    'use strict';

    // get button
    var button = document.getElementById('button');

    if (window.addEventListener) {
        // listen for clicks.
        // If button is clicked, execute doTheMagic()
        button.addEventListener('click', doTheMagic, false);
    }

    function doTheMagic() {
        // get both text areas
        var area1 = document.getElementById('area1');
        var area2 = document.getElementById('area2');

        // change colors
        area1.style.color = 'red';
        area2.style.color = 'green';

        // copy and paste value
        area2.value = area1.value;
    }
})();

另外，请查看demo。

Answer 3

获取text value from area1 is easy：

self.view.frame

所以设置它......

v = document.getElementById("area1").value

但是着色是不可能的：你需要包装document.getElementById("bla").value = v;或其他标签，以应用不同的样式。但是tags are not allowed within textarea。

你可能想要的是一种（方式）更复杂的基于javascript的文本编辑器，它支持在各种各样的视觉“文本区域”内的颜色（或粗体，或纯文本之外的其他更复杂的格式）.... / p>

您也可以查看...

<span>

Answer 4

有很多方法可以做到这一点：

使用基本代码

HTML：

ref.value = value

JavaScript：

<div id="boom1">Some random text1</div>

使用.cssText

HTML：

let element1 = document.getElementById("boom1")
element1.style.color = "red";
element1.style.fontWeight = "bold";
element1.style.fontSize = "2em";

JavaScript：

<div id="boom2">Some random text2</div>

使用Object.assign（）

HTML：

let element2 = document.getElementById("boom2").style.cssText =  "color: blue; font-weight: bold; font-size: 2em"

JavaScript：

<div id="boom3">Some random text3</div>

或简单地（不分解成变量）：

let object1 = document.getElementById("boom3")
let styles = {color: "green", fontWeight: "bold", fontSize: "2em"}
let element3 = Object.assign(object1.style, styles)

使用jQuery

HTML：

let element3 = Object.assign(document.getElementById("boom3").style, {color: "green", fontWeight: "bold", fontSize: "2em"})

JavaScript：

<div id="boom4">Some random text4</div>

Javascript如何传递变量和设置颜色

4 个答案: