使用 jQuery 更新 textarea 值更改上的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7165519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update text on textarea value change w/ jQuery
提问by santa
I have a textarea. I need to update text in a div when a value in textarea is changed by either typingin it or by placing some value in it via another jQuery functionor pasted.
我有一个文本区域。当 textarea 中的值被更改时，我需要更新 div 中的文本，方法是通过输入它或通过另一个 jQuery 函数或粘贴在其中放置一些值。
$(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...
它在页面加载时加载值，但我不确定用什么来检查 textarea 中的值...
回答by Andri
$(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());
});
});
回答by Emma Li
For textarea, the .change function only gets called when the textarea looses focus.
对于 textarea，只有在 textarea 失去焦点时才会调用 .change 函数。
I found my solution at this link: How can I bind to the change event of a textarea in jQuery?
我在此链接中找到了我的解决方案：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.lengthis a neat way of seeing if the textarea has been cleared.
Plusthis.value.length是一种查看 textarea 是否已清除的巧妙方法。
Cheers!
干杯!
回答by Senad Me?kin
$(document).ready(function(){
$('#myTxt').keypress(function(e){
$('#txthere').html($(this).val());
});
});
This will do that.
这将做到这一点。
回答by rap-2-h
2018, without JQUERY
2018 年，没有 JQUERY
The question is withJQuery, it's just FYI.
现在的问题是与JQuery的，它只是供参考。
JS
JS
let myTxt = document.getElementById('myTxt');
let txtHere = document.getElementById('txtHere');
myTxt.addEventListener('input', function() {
txtHere.innerHTML = myTxt.value;
});
HTML
HTML
<textarea id="myTxt"></textarea>
<div id="txtHere"></div>
回答by Sarfraz
You can use delegateevent like this:
您可以使用这样的delegate事件：
$('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.
一旦您在文本框中键入或粘贴，这应该会更新文本。
回答by JJ.
Use the change event handler (will activate when the content is changed and the textarea loses focus):
使用更改事件处理程序（将在内容更改且 textarea 失去焦点时激活）：
$('#myTxt').change(function(){
var input = $("#myTxt").val();
$("#txtHere").text(input );
});
回答by bycoder
$(document).delegate('#myTextareaId','input', function() {
$('#myTextId').html($(this).val());
});
