onkeyup event in textarea

javascript dom-events textarea onkeyup

19,998

Solution 1

Use value since it's not a content text but a value property

var input = document.getElementById("input");
var output = document.getElementById("output");

function sendCode(){
 output.innerHTML = input.value;
}

And a working demo here

Solution 2

Basically java script is not that dynamic.So a better option is to use jQuery.

[Note:- "jquery-2.2.2.min.js" given in src, in script tag, is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]

Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js" or any other name as you wish.The src of script should contain the same. The "jquery-2.2.2.min.js" should be in the same directory where you have the html file. Otherwise full path to be mentioned.

Here is the answer to your question.

    <html>
     <head>
       <title>Dynamic TextArea</title>
       <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
       <script type="text/javascript">
             $(document).ready(function(){
                     $("textarea").keyup(function(){
                           sendCode();
                     });
             });

             function sendCode(){
                  document.getElementById("output").innerHTML =
                  document.getElementById("input").value;
             }
       </script>
     </head>
     <body>
        <form>
              <textarea id="input">
                      Hello World!
              </textarea> 
        </form>
        <span id="output"></span>
     </body>
    </html>

If you have any doubts please ask. I am sure once you learn to use jQuery you would forget javascript.

19,998

Author by

Damjan Pavlica

Software Developer and Wiki author from Belgrade. The founder of skolakoda.org. I am here to learn.

Updated on June 04, 2022

Comments

Damjan Pavlica about 2 years
I have a very basic input/output structure in HTML:
```
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea> 

<div id="output"></div>
```
And I have JS function that should pass everything from input to output:
```
var input = document.getElementById("input");
var output = document.getElementById("output");

function sendCode(){
 output.innerHTML = input.innerHTML;
}
```
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.

Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/

Any help?

UPDATE: jsfiddle is updated and working now.
andrex almost 10 years

@DamanDaman If it's the best answer for you, you can mark it as accepted to let others know np
Manuel.B about 2 years

I think this answer is the most complete and scientific way to address this matter.