jQuery에서 텍스트 영역의 변경 이벤트에 바인딩하려면 어떻게 해야 합니까?

jQuery에서 텍스트 영역의 변경 이벤트에 바인딩하려면 어떻게 해야 합니까?

에 변화가 있었는지 캡처하고 싶다.<textarea>. 임의의 문자(삭제, 백스페이스)를 입력하거나 마우스를 클릭하여 붙여넣기 또는 잘라내기 등의 작업을 수행합니다.이러한 모든 이벤트에 대해 트리거할 수 있는 jQuery 이벤트가 있습니까?

변경 이벤트를 시도했지만 컴포넌트에서 탭아웃된 후에만 콜백이 트리거됩니다.

사용방법: 버튼을 활성화하고 싶은 경우<textarea>에는 임의의 텍스트가 포함되어 있습니다.

실제로 사용해 보세요.

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

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

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

데모

이것은, 타이핑, 잘라내기, 붙여넣기 등, 어떠한 변경에도 유효합니다.

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 데모

이벤트를 사용합니다.

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/en-US/docs/Web/Events/input#Browser_compatibility
2: BACKSPACE/DEL/DOUT을 눌러도 IE9의 on input이 실행되지 않음
3: https://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx
4: http://api.jquery.com/prop/ #prop-propertyName-function

단, 프로젝트 전체에서 사용할 수 있는 보다 글로벌한 솔루션에서는 textchange jQuery 플러그인을 사용하여 크로스 브라우저와 호환되는 새로운 솔루션을 얻을 것을 권장합니다.textchange이벤트입니다. 동일한 사람이 개발했습니다.onChange페이스북의 ReactJs를 위한 이벤트로, 거의 모든 웹사이트에서 사용합니다.그리고 Facebook을 위한 강력한 솔루션이라면 당신에게는 충분히 강력한 솔루션이라고 해도 무방할 것 같습니다.

업데이트: Internet Explorer의 드래그 앤 드롭 지원 등의 기능이 필요한 경우 의 최신 업데이트 포크를 참조하십시오.

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>

여기 또 다른 (현대) 버전이 있습니다. 하지만 앞서 말한 것과는 조금 다릅니다.IE9에서 테스트 완료:

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

오래된 브라우저의 경우,selectionchange그리고.propertychange(다른 답변에서 언급한 바와 같이).그렇지만selectionchangeIE9에서는 작동하지 않았습니다.그래서 이렇게 덧붙였어요.keyup.

이거 먹어봐...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

포커스 아웃으로 해보겠습니다.

$("textarea").focusout(function() {
   alert('textarea focusout');
});

.delegate는 jQuery JavaScript Library 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, 함수 키 등을 무시합니다.

주의: FF 애드온용이기 때문에 FF에서만 사용해 보았습니다.

이거 드셔보세요

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });

언급URL : https://stackoverflow.com/questions/11338592/how-can-i-bind-to-the-change-event-of-a-textarea-in-jquery