current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>";

}
share|improve this question
    
See my example and you will understand how it works :) –  crypticous Mar 15 at 10:47
1  
@crypticous Thank u –  Sreeraj Mar 15 at 10:54
    
@crypticous how to make it working for Chrome App –  Sreeraj Mar 15 at 15:42
    
Posted script working in Chrome too, its cross browser –  crypticous Mar 15 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.com/questions/20727493/… –  Sreeraj Mar 16 at 4:18
show 1 more comment

6 Answers

up vote 1 down vote accepted

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

share|improve this answer
    
onkeyup or onkeydown would be sufficient. –  Bharadwaj Mar 15 at 10:16
    
@Bharadwaj yep, updated –  crypticous Mar 15 at 10:19
add comment
up vote 0 down vote

use onchange event:

object.onchange=function(){SomeJavaScriptCode};
share|improve this answer
    
how to apply on the code i posted –  Sreeraj Mar 15 at 10:12
add comment
up vote 0 down vote

If you want to call in on load of your page try this

<body onLoad="yourFunctionName();">
share|improve this answer
add comment
up vote 0 down vote

<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.

share|improve this answer
add comment
up vote 0 down vote

I recommend 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>";

}
share|improve this answer
    
It's bad practice that you are recommending such an approach, even though OP wants to get rid of it –  crypticous Mar 15 at 10:30
    
not working, no change ,see-jsfiddle.net/djsreeraj/e8anT –  Sreeraj Mar 15 at 10:31
add comment
up vote 0 down vote 
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.com/jsref/event_onchange.asp

share|improve this answer
    
Bad practice, also textarea doesn't support onchange event –  crypticous Mar 15 at 10:33
    
@crypticous how it works here ntools.infoexpo.in/p/html-to-xml-encoder_4042.html –  Sreeraj Mar 15 at 10:42
    
It is supporting onchange on text area jsfiddle.net/tushar2289/s7adq/2 –  Vamshavardhan G Mar 15 at 10:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.