How to set the colour of a text in a textarea using html input tag

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

What am I doing wrong here?

In this same way, how would I set a specific font(family-font) to a particular word in the text area.

Answer 1

Use onkeyup instead of 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

For input type color it makes sense to use onchange event. It will work as you need:

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

JS

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

Demo: http://jsfiddle.net/xRBLT/

Answer 3

You could do something like this to apply the selected color for text.

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

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

To apply the font-famly into element textarea you could do something like this.

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

JS FIDDLE DEMO

Answer 4

Do it like this:

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

With some jQuery:

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

No OnClick or something let jQuery do the things.

http://jsfiddle.net/j2Y6s/