CODEWITHSUNDEEP
javascripthtmlcssfunctiontextarea
invincibles04
invincibles04

Reputation: 129

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

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.

Upvotes: 2

Views: 6317

Answers (4)

DominikAngerer
DominikAngerer

Reputation: 6530

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/

Upvotes: 0

Suman Bogati
Suman Bogati

Reputation: 6351

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

Upvotes: 0

dfsq
dfsq

Reputation: 193301

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/

Upvotes: 1

Zword
Zword

Reputation: 6787

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

Upvotes: 1

Related Questions