我想捕获<textarea>
的任何更改。例如,键入任何字符(删除,回退)或鼠标点击和剪切/粘贴等操作。是否有一个jQuery事件可以触发所有这些事件?
我尝试了change事件,但它仅在从组件中切换时才触发回调。
用途:如果<textarea>
包含任何文本,我想启用一个按钮。
我想捕获<textarea>
的任何更改。例如,键入任何字符(删除,回退)或鼠标点击和剪切/粘贴等操作。是否有一个jQuery事件可以触发所有这些事件?
我尝试了change事件,但它仅在从组件中切换时才触发回调。
用途:如果<textarea>
包含任何文本,我想启用一个按钮。
实际上,试试这个:
$('#textareaID').bind('input propertychange', function() {
$("#yourBtnID").hide();
if(this.value.length){
$("#yourBtnID").show();
}
});
对于您所做的任何更改,如打字、剪切、粘贴等,都有效。
propertychange
,还有input
。” - Blaster<input type="text">
,而不是<textarea>
。 - Ben Collinsbind
已经过时,请使用on
代替:
$("#textarea").on('change keyup paste', function() {
// your code here
});
注意:上面的代码会多次触发,每个匹配的触发类型都会触发一次。为了处理这种情况,请执行以下操作:var oldVal = "";
$("#textarea").on("change keyup paste", function() {
var currentVal = $(this).val();
if(currentVal == oldVal) {
return; //check to prevent multiple simultaneous triggers
}
oldVal = currentVal;
//action to be performed on textarea changed
alert("changed!");
});
on("change", function() ....)
这一部分对我来说没有用。没有触发任何警报、控制台日志或其他任何东西。不过,keyup
的效果非常好。 - Sebastialonsoon("change", function() ...
只有在文本区域失去焦点时才会触发。请参考我之前的问题(https://dev59.com/32Qm5IYBdhLWcg3w0Bq5),并在这个 JSFiddle 上尝试一下(http://jsfiddle.net/6bt2g/55/) - 改变文本区域的内容,然后点击文本区域外部,你应该能看到变化事件被触发。 - SNag.one("change keyup paste", function ...
代替.on
。one
事件监听器只会触发一次。 - solitud使用input
事件。
var button = $("#buttonId");
$("#textareaID").on('input',function(e){
if(e.target.value === ''){
// Textarea has no value
button.hide();
} else {
// Textarea has a value
button.show();
}
});
这个问题需要一个更为更新的回答,并且需要给出来源。以下是实际上有效的方法(当然你不必相信我的话):
// Storing this jQuery object outside of the event callback
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")
// input :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange :: for <IE9 [3]
$('#textareaID').on('input selectionchange propertychange', function() {
// This is the correct way to enable/disabled a button in jQuery [4]
$myButton.prop('disabled', this.value.length === 0)
}
1: https://developer.mozilla.org/zh-CN/docs/Web/Events/input#浏览器兼容性
2: oninput 在 IE9 中当我们按 BACKSPACE / DEL / 剪切时不会执行
3: https://msdn.microsoft.com/zh-cn/library/ms536956(v=vs.85).aspx
4: http://api.jquery.com/prop/#prop-propertyName-function
但是,为了实现一个更全局的解决方案,您可以在整个项目中使用textchange jQuery 插件来获得一个新的、跨浏览器兼容的textchange
事件。它由同一个人开发,该人为 Facebook 的 ReactJS 实现了相应的 onChange
事件,并且他们在几乎整个网站中使用它。我认为可以放心地说,如果它足够强大,足以满足 Facebook 的要求,那么它对您来说也足够强大。 :-)
更新:如果您需要在 Internet Explorer 中支持拖放等功能,则可能需要查看pandell
更近期的更新版本的 jquery-splendid-textchange
。
问题是使用jQuery,仅供参考。
let textareaID = document.getElementById('textareaID');
let yourBtnID = document.getElementById('yourBtnID');
textareaID.addEventListener('input', function() {
yourBtnID.style.display = 'none';
if (textareaID.value.length) {
yourBtnID.style.display = 'inline-block';
}
});
<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>
这里有一个比之前提到的版本稍微不同的(现代)版本。在IE9中进行了测试:
$('#textareaID').on('input change keyup', function () {
if (this.value.length) {
// textarea has content
} else {
// textarea is empty
}
});
对于过时的浏览器,您可能还需要添加selectionchange
和propertychange
(如其他答案中所述)。但是在IE9中,selectionchange
对我无效。这就是为什么我添加了keyup
。
$("textarea").focusout(function() {
alert('textarea focusout');
});
试试这个...
$("#txtAreaID").bind("keyup", function(event, ui) {
// Write your code here
});
.delegate 是唯一在使用 jQuery JavaScript库 v2.1.1 时可用的方法。
$(document).delegate('#textareaID','change', function() {
console.log("change!");
});
经过一些实验,我想出了这个实现方法:
$('.detect-change')
.on('change cut paste', function(e) {
console.log("Change detected.");
contentModified = true;
})
.keypress(function(e) {
if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
console.log("Change detected.");
contentModified = true;
}
});
处理输入和选择的任何更改,以及忽略箭头键和像Ctrl、Cmd、功能键等的其他键。
注意:我只在FireFox中尝试过这个功能,因为它是为FireFox插件设计的。