I have seen some pages in which we can input in textarea and correspondingly an output gets displayed for it no button clicks in between , see an example here .html
How to apply this type in the below code? html:
<textarea id="source" placeholder="Text Entry."></textarea>
<p id="result"> </p>
Javascript
function myFunction()
{
var str = document.getElementById('source').value;
var len = str.length;
document.getElementById("result").innerHTML="<textarea>"+len+"</textarea>";
}
I have seen some pages in which we can input in textarea and correspondingly an output gets displayed for it no button clicks in between , see an example here http://ntools.infoexpo.in/p/html-to-xml-encoder_4042.html
How to apply this type in the below code? html:
<textarea id="source" placeholder="Text Entry."></textarea>
<p id="result"> </p>
Javascript
function myFunction()
{
var str = document.getElementById('source').value;
var len = str.length;
document.getElementById("result").innerHTML="<textarea>"+len+"</textarea>";
}
- See my example and you will understand how it works :) – nanobash Commented Mar 15, 2014 at 10:47
- @crypticous how to make it working for Chrome App – Sreeraj Commented Mar 15, 2014 at 15:42
- Posted script working in Chrome too, its cross browser – nanobash Commented Mar 15, 2014 at 16:45
- script works, but how to customize it in order to apply this script in code of a google chrome app - im writing ; google chrome app rules has some restrictions on javascript inclusion ; see this stackoverflow./questions/20727493/… – Sreeraj Commented Mar 16, 2014 at 4:18
- I answered what your question demanded, I am not aware of google chrome extensions, that you have to find out – nanobash Commented Mar 17, 2014 at 9:06
6 Answers
Reset to default 8If you want to call in on load of your page try this
<body onLoad="yourFunctionName();">
I'd suggest you to use addEvent,removeEvent function approaches due to cross browser issues.
addEvent function is capable of to add events on elements, while removeEvent remove them
if ( document.addEventListener ) { // if addEventListener provided
this.addEvent = function(elem, type, fn) {
elem.addEventListener(type, fn, false);
return fn;
};
this.removeEvent = function(elem, type, fn) {
elem.removeEventListener(type, fn, false);
};
} else if ( document.attachEvent ) { // if attachEvent provided
this.addEvent = function(elem, type, fn) {
var bound = function() {
return fn.apply(elem, arguments);
};
elem.attachEvent("on" + type, bound);
return bound;
};
this.removeEvent = function (elem, type, fn) {
elem.detachEvent("on" + type, fn);
};
}
For example if you have HTML
<textarea id="source" placeholder="Text Entry."></textarea>
<textarea id="result" placeholder="Text Entry." disabled="disabled"></textarea>
JavaScript
addEvent(document.getElementById("source"),"keydown",function(){ // event will occur on keyup
document.getElementById("result").innerHTML = this.value; // this refers to textarea element
});
JSFiddle
PS. Check out attachEvent and addEventListener methods
I remend you to use the onchange event, so everytime the user made some change on the text field it will trigger the function.
HTML will be something like this
<textarea id="source" onchange="myFunction();" placeholder="Text Entry."></textarea>
<p id="result"> </p>
JavaScript code
function myFunction() {
var str = document.getElementById('source').value;
var len = str.length;
document.getElementById("result").innerHTML="<textarea>"+len+"</textarea>";
}
use onchange event:
object.onchange=function(){SomeJavaScriptCode};
<textarea cols="40" onchange="do_encode(this)" onkeyup="do_encode(this)" ...>
Every time user type/paste anything will trigger onchange and onkeyup event.
There's a full list of events reference on MDN.
document.getElementById('source').onchange(function() {
// Write your code here . It will execute when your changes the text in textarea
})
go through the link http://www.w3schools./jsref/event_onchange.asp