Update text on textarea value change w/ jQuery

Question

I have a textarea. I need to update text in a div when a value in textarea is changed by either typing in it or by placing some value in it via another jQuery function or pasted.

$(document).ready(function(){
    function myFunc() {
        var input = $("#myTxt").val();
        $("#txtHere").text(input);
    }       
    myFunc();

    // EDIT BELOW -- this will update while typing
    $("#myTxt").keyup(myFunc);

});

<textarea id="myTxt"></textarea>
<div id="txtHere"></div>

It loads the value on page load but I'm not sure what to use to check for value in the textarea...

score 27 · Accepted Answer · edited Jan 31 '13 at 14:24

27

$(document).ready(function(){
    function myFunc(){
        var input = $("#myTxt").val();
        $("#txtHere").text(input);
    }       
    myFunc();

    //either this
    $('#myTxt').keyup(function(){
        $('#txtHere').html($(this).val());
    });

    //or this
    $('#myTxt').keyup(function(){
        myFunc();
    });

    //and this for good measure
    $('#myTxt').change(function(){
        myFunc(); //or direct assignment $('#txtHere').html($(this).val());
    });
});

edited Jan 31 '13 at 14:24

2sh

5
3

answered Aug 23 '11 at 18:09

Andri

1,473
13
20

1

I think the last option is a good addition to update while typing. Can't I just do: $('#myTxt').keyUp(myFunc); ? – santa Aug 23 '11 at 18:23
5

"for good measure" sounds like you aren't really sure what's going to be executed – Druska Sep 19 '13 at 17:21

score 13 · Answer 2 · edited May 23 '17 at 12:32

13

For textarea, the .change function only gets called when the textarea looses focus.

I found my solution at this link: How can I bind to the change event of a textarea in jQuery?

$('#textareaID').bind('input propertychange', function() {
      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

This worked perfectly for me. It handles any type of change, including pasting.

Plus this.value.length is a neat way of seeing if the textarea has been cleared.

Cheers!

edited May 23 '17 at 12:32

Community

1
1

answered Jul 27 '13 at 12:39

Emma Li

301
2
8

1

Welcome to Stack Overflow. Please summarise the link in your answer; that way, if the link goes stale the answer won't be completely useless. – michaelb958--GoFundMonica Jul 27 '13 at 12:58

score 2 · Answer 3 · answered Aug 23 '11 at 18:08

2

$(document).ready(function(){
   $('#myTxt').keypress(function(e){
       $('#txthere').html($(this).val());
   });
});

This will do that.

answered Aug 23 '11 at 18:08

Senad Meškin

13,327
4
40
54

Only if he pastes text via shortcut. Using context menu will not trigger this. – Bram Vandenbussche Aug 23 '11 at 18:26

score 1 · Answer 4 · answered Feb 12 '18 at 16:10

2018, without JQUERY

The question is with JQuery, it's just FYI.

JS

let myTxt = document.getElementById('myTxt');
let txtHere = document.getElementById('txtHere');
myTxt.addEventListener('input', function() {
    txtHere.innerHTML = myTxt.value;
});

HTML

<textarea id="myTxt"></textarea>
<div id="txtHere"></div>

Sarfraz · Answer 5 · 2011-08-23T18:14:02.727

1

You can use delegate event like this:

$('body').delegate('#myTxt', 'keyup change', function(){
   $('#txtHere').text(this.value);
});

This should update the text as soon as you type in the text box or paste.

edited Aug 23 '11 at 18:14

answered Aug 23 '11 at 18:08

Sarfraz

367,681
72
526
573

I have another function where a value can be posted in this textarea by selecting from a list. But thinking of it, it's a textarea, pasting in is a possibility... – santa Aug 23 '11 at 18:21

bycoder · Answer 6 · 2017-03-13T04:53:32.347

0

$(document).delegate('#myTextareaId','input', function() {
  $('#myTextId').html($(this).val());
});

edited Mar 13 '17 at 04:53

answered Mar 12 '17 at 14:48

bycoder

51
1
3

score 0 · Answer 7 · answered Aug 23 '11 at 18:08

0

Use the change event handler (will activate when the content is changed and the textarea loses focus):

$('#myTxt').change(function(){
    var input = $("#myTxt").val();
    $("#txtHere").text(input );
});

answered Aug 23 '11 at 18:08

JJ.

5,315
3
25
31

Update text on textarea value change w/ jQuery

7 Answers7

2018, without JQUERY

JS

HTML

Linked