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

Please don't edit the question to add the answer, this makes it confusing to know what is really the thing that was asked. — PhoneixS, Sep 06 '22 at 15:10

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

28

$(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,503
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 14 · Answer 2 · edited May 23 '17 at 12:32

14

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

311
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,597
4
37
55

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

377,238
77
533
578

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

61
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,425
3
26
31

Update text on textarea value change w/ jQuery

7 Answers7

2018, without JQUERY

JS

HTML

Linked