JQuery: 입력 필드에서 변경 사항 감지

JQuery: 입력 필드에서 변경 사항 감지

이 질문에는 이미 다음과 같은 답이 있습니다.

텍스트 상자의 내용이 변경된 것을 탐지하는 방법 (15개 답변)

마감됨3년 전에.

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

.keypress 이벤트에 대한 JQuery 페이지에 일관성이 없다고 표시됩니까?또한 백스페이스, 삭제 등에 대해서도 작동하지 않습니다.

.keydown은 Shift, alt, 화살표 키 등에 반응하기 때문에 그대로 사용할 수 없습니다.또한 사용자가 키를 누른 상태에서 여러 개의 문자를 삽입해도 두 번 이상 실행되지 않습니다.

제가 빠진 간결한 방법이 있나요?아니면 .keydown을 사용하여 화살표 키, Shift 등에 의해 트리거된 이벤트를 필터링해야 합니까?제 주요 관심사는 필터링해야 한다는 것을 모르는 키가 있을 것이라는 것입니다. (alt와 ctrl을 거의 잊어버렸는데 다른 키가 있을 수도 있습니다.) 그런데 키를 누른 채 여러 문자를 삽입하는 것을 어떻게 감지할 수 있을까요?

추가로 붙여넣기(오른쪽 클릭 포함)로 인한 변경을 감지할 수 있지만 여기서 해결책을 찾을 수 있습니다.

입력' 이벤트를 텍스트 상자에 바인딩할 수 있습니다.입력이 변경될 때마다 실행되므로 마우스 오른쪽 단추를 눌러 붙여넣을 때는 삭제하고 입력합니다.

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

를 사용하는 경우change핸들러. 사용자가 원하는 입력란을 선택 취소한 후에만 실행됩니다.

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

jquery 변경 이벤트 사용

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

예문

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

장점은.change을 가지고 있습니다..keypress,.focus,.blur그것은.change입력이 변경된 경우에만 이벤트가 실행됩니다.

최근에 아래 기능을 사용하여 동일한 기능을 수행했습니다.

저는 편집할 때 SAVE 버튼을 활성화하고 싶었습니다.

1. 변경 이벤트는 편집 후 저장 버튼을 클릭하기 전에 페이지의 다른 위치에서 마우스를 클릭하는 경우에만 실행되므로 권장되지 않습니다.
2. 키 누르기는 백스페이스, 삭제 및 붙여넣기 옵션을 처리하지 않습니다.
3. Key Up은 탭, 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() 1 1.7 기준으로 기타 $.on()이벤트 핸들러를 연결하는 데 선호되는 방법입니다(http://api.jquery.com/on/ 및 http://api.jquery.com/bind/) 참조).

$.keydown()는 에대지일뿐다니입길름한▁to▁shortcut▁a다의 바로 가기입니다.$.bind('keydown'),그리고.$.bind()무엇입니까$.on()대체합니다.

질문에 답하기 위해, 제가 알기로는, 당신이 사건을 발생시킬 필요가 없는 한.keydown 적으말면하로구체,면,change이벤트가 당신을 위해 묘기를 부릴 것입니다.

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

아래 댓글에 대응하기 위해 자바스크립트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