如何使用html输入标签设置文本区域中文本的颜色

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 = ''; 
}

我在这里做错了什么？

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

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; 
}

演示小提琴

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 
}

要应用的字体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/