如何使用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/