如何在jQuery中绑定textarea的change事件？

Question

如果发生任何变化,我想捕获<textarea>.就像键入任何字符(删除,退格)或鼠标单击并粘贴或剪切一样.是否有可以触发所有这些事件的jQuery事件？

我尝试了更改事件,但只有在从组件中跳出后才会触发回调.

使用:如果<textarea>包含任何文本,我想启用按钮.

Answer 1

实际上试试这个:

$('#textareaID').bind('input propertychange', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

DEMO

这适用于您所做的任何更改,打字,剪切,粘贴.

Answer 2

bind已弃用.用途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!");
});

jsFiddle演示

Answer 3

欢迎来到2015年,我们有一个新的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();
  }
});

Answer 4

有了消息来源,这个问题需要一个更新的答案.这实际上是有效的(虽然你不必接受我的话):

// 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/en-US/docs/Web/Events/input#Browser_compatibility
2:当我们点击BACKSPACE/DEL/do CUT
3 时,IE9中的oninput不会触发:https:// msdn .microsoft.com/zh-CN/library/ms536956(v = vs.85).aspx
4:http://api.jquery.com/prop/#prop-propertyName-function

但是,对于可以在整个项目中使用的更全面的解决方案,我建议使用textchange jQuery插件来获得新的跨浏览器兼容textchange事件.它是由同一个人onChange为Facebook的ReactJS 实现同等活动开发的,他们几乎用于整个网站.而且我认为可以肯定地说,如果它对Facebook来说是一个足够强大的解决方案,它可能足够强大.:-)

更新:如果您碰巧需要在Internet Explorer中使用拖放支持等功能,您可能需要查看pandell最新更新的分支jquery-splendid-textchange.

Answer 5

2018年,没有JQUERY

现在的问题是与 JQuery的,它只是供参考.

JS

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';
    }
});

HTML

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

Answer 6

这是另一个（现代）版本，但与前面提到的版本略有不同。使用IE9测试：

$('#textareaID').on('input change keyup', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

对于过时的浏览器，您还可以添加selectionchange和propertychange（如其他答案中提到的）。但selectionchange在 IE9 中对我不起作用。这就是我添加的原因keyup。