如何使用html输入标记设置textarea中文本的颜色

Question

HTML

<form name="myform">
  Select Color : <input type="color" onClick="Color()">
</form>

<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ..."></textarea>

的Javascript

function Color() {
    document.getElementById("myTextArea").style.color = ''; 
}

我在这里做错了什么？

以同样的方式，我如何为文本区域中的特定单词设置特定字体（family-font）。

Answer 1

使用onkeyup代替onclick。

<强> HTML

<form name="myform">
    Select Color : <input type="color" onkeydown="Color(this.value)">
</form>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ..."></textarea>

<强> JS

function Color(s){
    document.getElementById("myTextArea").style.color = s; 
}

Demo Fiddle

Answer 2

对于输入类型颜色，使用onchange事件是有意义的。它会按你的需要工作：

<input type="color" onchange="Color(this)">

JS

function Color(obj) {
    document.getElementById("myTextArea").style.color = obj.value;
}

演示：http://jsfiddle.net/xRBLT/

Answer 3

您可以执行以下操作，将所选颜色应用于文本。

<input type="color" onClick="Color(this)">

function Color(cthis){
    document.getElementById("myTextArea").style.color = cthis.value 
}

要将font-famly应用于元素textarea，您可以执行类似的操作。

document.getElementById("myTextArea").style.fontFamily="Arial";

<强> JS FIDDLE DEMO

Answer 4

这样做：

<input type="color" id="color"/>

使用一些jQuery：

$("#color").change(function(){
var clr = $(this).val();
$("#myTextArea").css("color",clr);
});

没有OnClick或其他让jQuery做的事情。

http://jsfiddle.net/j2Y6s/