使用/ jQuery更新textarea值更改的文本

Question

我有一个textarea。当textarea中的值被输入更改为通过另一个jQuery函数或粘贴在其中时，我需要更新div中的文本即可。

$(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>

它会加载页面加载的值，但我不确定在textarea中检查值是什么...

Answer 1

$(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());
    });
});

Answer 2

对于textarea，仅当textarea失去焦点时才会调用.change函数。

我在此链接找到了我的解决方案：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();
      }
});

这对我来说非常合适。它处理任何类型的更改，包括粘贴。

Plus this.value.length是查看textarea是否已被清除的简洁方法。

干杯！

Answer 3

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

这样就可以了。

Answer 4

您可以使用delegate这样的事件：

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

只要您在文本框中输入或粘贴，就应该更新文本。

Answer 5

使用更改事件处理程序（将在内容更改且textarea失去焦点时激活）：

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

Answer 6

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

Answer 7

2018，没有JQUERY

问题是 JQuery，它仅仅是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>