입력 요소의 Javascript 변경 이벤트가 포커스를 잃을 때만 발생합니다.

입력 요소가 있고 내용의 길이를 계속 확인하고 길이가 특정 크기와 같을 때마다 제출 버튼을 활성화하고 싶지만 Javascript의 onchange 이벤트를 이벤트로 사용하는 데 문제가 있습니다. 입력 요소가 범위를 벗어날 때만 발생하고 내용이 변경 될 때 발생하지 않습니다.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange는 이름의 내용을 변경할 때 실행되지 않지만 이름이 초점을 벗어난 경우에만 실행됩니다.

이 이벤트가 콘텐츠 변경에 적용되도록 할 수있는 작업이 있습니까? 또는 이것을 위해 사용할 수있는 다른 이벤트? onkeyup 기능을 사용하여 해결 방법을 찾았지만 브라우저의 자동 완성기에서 일부 콘텐츠를 선택하면 실행되지 않습니다.

필드의 내용이 키보드로든 마우스로든 변경 될 때 작동 할 수있는 무언가를 원합니다. 아이디어가 있습니까?

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

이 잡을 것 change, 키 입력을, paste, textInput, input(가능한 경우). 그리고 필요 이상으로 발사하지 마십시오.

http://jsfiddle.net/katspaugh/xqeDj/

참조 :

textInput— W3C DOM 레벨 3 이벤트 유형. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

사용자 에이전트는 하나 이상의 문자가 입력 된 경우이 이벤트를 전달해야합니다. 이러한 문자는 다양한 소스, 예를 들어 키보드 장치에서 키를 눌렀거나 놓아서 발생하는 문자, 입력 방법 편집기의 처리 또는 음성 명령으로 인해 발생하는 문자에서 유래 할 수 있습니다. "붙여 넣기"작업이 구조 또는 스타일 정보가없는 텍스트 구절과 같이 간단한 문자 시퀀스를 생성하는 경우이 이벤트 유형도 생성되어야합니다.

input— HTML5 이벤트 유형.

사용자가 값을 변경할 때 컨트롤에서 발생

Firefox, Chrome, IE9 및 기타 최신 브라우저에서 지원합니다.

이 이벤트는 요소가 포커스를 잃을 때 발생하는 onchange 이벤트와 달리 수정 직후에 발생합니다.

katspaugh의 답변에 대한 확장으로 CSS 클래스를 사용하여 여러 요소에 대해 수행하는 방법이 있습니다.

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

찾는 데 30 분이 걸렸지 만 2019 년 6 월에 작동합니다.

<input type="text" id="myInput" oninput="myFunction()">

js에서 프로그래밍 방식으로 이벤트 리스너를 추가하려는 경우

inputElement.addEventListener("input", event => {})

jQuery 방식으로 수행하십시오.

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

onkeyup을 사용할 수 있습니다.

<input id="name" onkeyup="checkLength(this.value)" />

모든 가능성을 포착하려면 onkeyup및 onclick(또는 onmouseup) 조합을 사용해야합니다 .

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

여기에 동일한 문제에 대해 개발 한 또 다른 솔루션이 있습니다. 그러나 많은 입력 상자를 사용하므로 이전 값을 요소 자체의 사용자 정의 속성 인 "데이터 값"으로 유지합니다. jQuery를 사용하면 관리하기가 매우 쉽습니다.

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

여기에 5-6 개의 입력 상자에 'filterBox'클래스가 있으며 데이터 값이 자체 값과 다른 경우에만 filterBy 메서드를 실행합니다.