JQuery : 입력 필드의 변화 감지

JQuery : 입력 필드의 변화 감지

---

가능한 중복 :
Jquery : 텍스트 상자의 내용을 감지하는 방법이 변경되었습니다.

사용자의 키보드 동작이 텍스트 필드의 값을 변경하는시기를 감지하고 싶습니다. 최신 브라우저에서 일관되게 작동해야합니다.

.keypress 이벤트의 JQuery 페이지에 일관성이 없다고 표시되어 있습니까? 또한 백 스페이스, 삭제 등에서는 작동하지 않습니다.

.keydown은 shift, alt 및 arrow 키 등에 반응하기 때문에 .keydown을 그대로 사용할 수 없습니다. 또한 사용자가 키를 누르고 여러 문자가 삽입되면 두 번 이상 실행되지 않습니다.

간결한 방법이 있습니까? 아니면 .keydown을 사용하고 화살표 키, Shift 등으로 트리거되는 이벤트를 필터링해야합니까? 내 주요 관심사는 내가 알지 못하는 키가 필터링되어야한다는 것입니다. (나는 alt와 ctrl을 거의 잊어 버렸습니다. 다른 것들이있을 것이라고 생각합니다.) 그런 다음 키를 누르고 여러 문자를 삽입하는 것을 어떻게 알 수 있습니까?

보너스로 붙여 넣기 (오른쪽 클릭 포함)로 인한 변경 사항을 감지하지만 여기 에서 해결책을 얻습니다 .

---

'입력'이벤트를 텍스트 상자에 바인딩 할 수 있습니다. 입력이 바뀔 때마다 발생 하므로 마우스 오른쪽 버튼으로 클릭하여 붙여 넣을 때 삭제하고 입력하십시오.

$('#myTextbox').on('input', function() {
    // do something
});

change핸들러 를 사용하는 경우 사용자가 입력 상자를 선택 해제 한 후에 만 ​​실행되며, 원하는 결과가 아닐 수 있습니다.

여기에 두 가지 예가 있습니다 : http://jsfiddle.net/6bSX6/

---

jquery 변경 이벤트 사용

설명 : 이벤트 핸들러를 "change"JavaScript 이벤트에 바인딩하거나 요소에서 해당 이벤트를 트리거합니다.

예

$("input[type='text']").change( function() {
  // your code
});

장점 .change이상있다가 .keypress, .focus, .blur이다 .change경우에만 실행됩니다 입력이 변경되었을 때

---

아래 기능을 사용하여 최근에 얻은 동일한 기능.

편집시 저장 버튼을 활성화하고 싶었습니다.

1. 변경 이벤트는 편집 후 SAVE 버튼을 클릭하기 전에 페이지의 다른 곳에서 마우스를 클릭 한 경우에만 실행되므로 권장되지 않습니다.
2. 키 누르기는 백 스페이스, 삭제 및 붙여 넣기 옵션을 처리하지 않습니다.
3. 키 업은 탭, Shift 키를 포함한 모든 것을 처리합니다.

따라서 텍스트 필드의 키 누르기, 키 업 (백 스페이스, 삭제) 및 붙여 넣기 이벤트를 결합하여 아래 함수를 작성했습니다.

그것이 당신을 돕기를 바랍니다.

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}

---

사용 $.on()등의 바로 가기를 사용하지 않는 입력에 선택한 이벤트를 바인딩 $.keydown()때문에 jQuery를 1.7로 등은 $.on()(여기 참조 이벤트 핸들러를 연결하는 기본 방법입니다 : http://api.jquery.com/on/ 및 HTTP : //api.jquery.com/bind/ ).

$.keydown()단지 바로 가기입니다 $.bind('keydown'), 그리고 $.bind()무엇을 $.on()(다른 사람의 사이에서) 대체합니다.

내가 아는 한 귀하의 질문에 대답하기 위해 keydown구체적 으로 이벤트를 시작 해야하는 경우가 아니라면 change이벤트가 대신해야합니다.

$('element').on('change', function(){
    console.log('change');
});

아래 주석에 응답하기 위해 javascript change이벤트는 https://developer.mozilla.org/en-US/docs/Web/Events/change에 설명되어 있습니다.

다음은 changejQuery를 사용하여 입력 요소에서 작동 하는 이벤트 의 실제 예입니다 . http://jsfiddle.net/p1m4xh08/

---

jQuery change () 함수를 사용할 수 있습니다

$('input').change(function(){
  //your codes
});

API 페이지에서이를 사용하는 방법에 대한 예가 있습니다. http://api.jquery.com/change/

참고 URL : https://stackoverflow.com/questions/12797700/jquery-detect-change-in-input-field