입력 요소에 대한 자바스크립트 변경 이벤트는 초점 손실 시에만 발생합니다.

입력 요소에 대한 자바스크립트 변경 이벤트는 초점 손실 시에만 발생합니다.

저는 입력 요소가 있고 내용의 길이를 계속 확인하고 싶고 길이가 특정 크기와 같아질 때마다 제출 버튼을 활성화하고 싶은데, 입력 요소가 범위를 벗어날 때만 이벤트가 발생하고 내용이 바뀔 때는 발생하지 않아 자바스크립트의 onchange 이벤트 문제에 직면해 있습니다.

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

----변경 시 이름 내용을 변경할 때는 불이 붙지 않고, 이름이 초점을 벗어날 때만 불이 붙습니다.

이 이벤트가 콘텐츠 변경에 효과를 발휘할 수 있도록 제가 할 수 있는 일이 있을까요?아니면 내가 이걸 위해 사용할 수 있는 다른 이벤트?온키업 기능을 사용하여 해결 방법을 찾았지만 브라우저의 자동 완성기에서 일부 콘텐츠를 선택해도 실행되지 않습니다.

키보드든 마우스든 필드의 내용이 바뀔 때 작동할 수 있는 무언가를 원합니다.무슨 생각 있어요?

(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 문자 이벤트

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

input— HTML5 이벤트 유형

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

파이어폭스, 크롬, IE9 등 최신 브라우저가 이를 지원합니다.

이 이벤트는 요소가 초점을 잃을 때 발생하는 on change 이벤트와 달리 수정 후 즉시 발생합니다.

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

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

js에서 프로그래밍 방식으로 이벤트 청취자를 추가하려면

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

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

jQuery 방식으로 실행합니다.

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


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

키업 시 사용 가능

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

은 입니다를 해야 할 입니다.onkeyup그리고.onclick(또는onmouseup모든 가능성을 잡으려면요

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

여기 같은 문제에 대해 제가 개발하는 또 다른 해결책이 있습니다.하지만 저는 많은 입력 상자를 사용하기 때문에 오래된 값을 요소 자체의 사용자 정의 속성인 "data-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' 클래스가 있고, data-value가 자신의 값과 다른 경우에만 filterBy를 실행합니다.

언급URL : https://stackoverflow.com/questions/7105997/javascript-change-event-on-input-element-fires-on-only-losing-focus