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
– PhoneixS, Commented Sep 6, 2022 at 15:10

2sh · Accepted Answer · 2013-01-31 14:24:08Z

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, 2013 at 14:24

2sh

53 bronze badges

answered Aug 23, 2011 at 18:09

Andri

1,50313 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

santa Over a year ago

I think the last option is a good addition to update while typing. Can't I just do: $('#myTxt').keyUp(myFunc); ?

Druska Over a year ago

"for good measure" sounds like you aren't really sure what's going to be executed

Community · Accepted Answer · 2017-05-23 12:32:05Z

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, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 27, 2013 at 12:39

Emma Li

3112 silver badges8 bronze badges

1 Comment

michaelb958--GoFundMonica Over a year ago

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.

Senad Meškin · Accepted Answer · 2011-08-23 18:08:42Z

2

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

This will do that.

answered Aug 23, 2011 at 18:08

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

1 Comment

Bram Vandenbussche Over a year ago

Only if he pastes text via shortcut. Using context menu will not trigger this.

Sarfraz · Accepted Answer · 2011-08-23 18:14:02Z

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, 2011 at 18:14

answered Aug 23, 2011 at 18:08

Sarfraz

383k81 gold badges561 silver badges613 bronze badges

1 Comment

santa Over a year ago

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

rap-2-h · Accepted Answer · 2018-02-12 16:10:03Z

1

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>

answered Feb 12, 2018 at 16:10

rap-2-h

32.3k49 gold badges190 silver badges281 bronze badges

Comments

JJ. · Accepted Answer · 2011-08-23 18:08:16Z

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, 2011 at 18:08

JJ.

5,5153 gold badges29 silver badges32 bronze badges

Comments

bycoder · Accepted Answer · 2017-03-13 04:53:32Z

0

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

edited Mar 13, 2017 at 4:53

answered Mar 12, 2017 at 14:48

bycoder

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

Update text on textarea value change w/ jQuery

7 Answers 7

2 Comments

1 Comment

1 Comment

1 Comment

2018, without JQUERY

JS

HTML

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

1 Comment

1 Comment

2018, without JQUERY

JS

HTML

Comments

Comments

Comments

Linked

Related