The textarea HTML element has a onchange event , however the onchange event is not fired as the text is edited .
The onchange event is fired on moving focus out of the textarea after editing the text( tab outside or click outside the textarea).
There is an onpropertychange event which can trap any change to the value of any property of the element, this includes the text being changed .
So use the onpropertychange when you want a event to be raised on editing the textarea like number of charecters in the textarea as it is being typed.
Here is the sample code example which demonstrates the difference
<html>
<script>
function textarea_onchange()
{
alert("text changed in text area");
}
function textbox_onchange()
{
alert("text changed in text box");
}
function textarea_onpropertychange()
{
alert("property changed in textarea");
}
function textbox_onpropertychange()
{
var str=frm1.textbox2.value;
charcount.innerHTML= str.length;
}
</script>
<body>
<form id="frm1">
<b>Testing onchange</b><br>
<div style="border:1 solid black;">
TextArea Control
<TEXTAREA STYLE="border:1 solid black;" onchange="textarea_onchange()" >Onchange is not what you think it is
</TEXTAREA>
<hr>
Form Text control
<input type="text" id="textbox1" name="textbox1" onchange="textbox_onchange()" value="inivital value">
</div>
<br>
<b>Testing onpropertychange</b><br>
<div style="border:1 solid black;">
TextArea Control
<TEXTAREA STYLE="border:1 solid black;" I onpropertychange="textarea_onpropertychange()">
Onchange is not what you think it is
</TEXTAREA>
<hr>
Form Text control
<input type="text" id="textbox2" name="textbox2" onpropertychange="textbox_onpropertychange()" value="initial value">
</input>
Number of Characters is : <b id="charcount"></b>
</div>
</form>
</body>
</html>
technorati tags: DHTML, HTML, javascript
No comments:
Post a Comment