내 경험상 input type="text" onchange이벤트는 일반적으로 blur컨트롤 을 떠난 후에 만 발생합니다 .
컨텐츠가 변경 onchange될 때마다 브라우저가 강제로 트리거되도록하는 방법이 textfield있습니까? 그렇지 않다면 이것을“수동으로”추적하는 가장 우아한 방법은 무엇입니까?
onkey*필드를 마우스 오른쪽 단추로 클릭하고 붙여 넣기를 선택하면 키보드 입력없이 필드가 변경되므로 이벤트 사용 이 신뢰할 수 없습니다.
가 setTimeout유일한 방법은? .. 미운 🙂
답변
최신 정보:
다른 답변 (2015)을 참조하십시오 .
원래 2009 답변 :
그렇다면 키 다운, onchange블러 및 붙여 넣기시 이벤트를 시작 하시겠습니까? 마술이다.
입력 할 때 변경 사항을 추적하려면을 사용하십시오 "onkeydown". 마우스로 붙여 넣기 작업을 트래핑해야하는 경우 "onpaste"( IE , FF3 ) 및 "oninput"( FF, Opera, Chrome, Safari 1 )을 사용하십시오.
1 Safari에서 고장 <textarea>났습니다. 사용 textInput하는 대신
답변
요즘 들어요 oninput. onchange요소에 초점을 잃을 필요없이 느낌이 듭니다 . HTML5입니다.
IE8 이하를 제외한 모든 사람 (모바일조차)이 지원합니다. IE의 경우 추가하십시오 onpropertychange. 나는 이것을 다음과 같이 사용한다 :
const source = document.getElementById('source');
const result = document.getElementById('result');
const inputHandler = function(e) {
result.innerHTML = e.target.value;
}
source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); <input id="source">
<div id="result"></div>답변
아래 코드는 Jquery 1.8.3에서 잘 작동합니다.
HTML : <input type="text" id="myId" />
자바 스크립트 / JQuery :
$("#myId").on('change keydown paste input', function(){
doSomething();
});답변
자바 스크립트는 여기서 예측할 수없고 재미 있습니다.
onchange텍스트 상자를 흐리게 할 때만 발생onkeyup&onkeypress항상 텍스트의 변화가 발생하지 않습니다onkeydown텍스트 변경시 발생하지만 마우스 클릭으로 잘라 내기 및 붙여 넣기를 추적 할 수 없음onpaste&oncut키를 누르거나 마우스 오른쪽 버튼을 클릭해도 발생합니다.
그래서, 텍스트 상자의 변화를 추적하기 위해, 우리는 필요 onkeydown, oncut및 onpaste. 이 이벤트의 콜백에서 텍스트 상자의 값을 확인하면 콜백 후에 값이 변경되어 업데이트 된 값을 얻지 못합니다. 따라서 이에 대한 해결책은 변경을 추적하기 위해 50 밀리 초 (또는 그 이하)의 시간 초과로 시간 초과 기능을 설정하는 것입니다.
이것은 더러운 해킹이지만 이것이 조사한 유일한 방법입니다.
다음은 예입니다.
http://jsfiddle.net/2BfGC/12/
답변
onkeyup예를 들어 입력 한 후 발생 t합니다. 손가락을 들어 올리면 눌립니다. 동작이 발생하지만 keydown문자를 숫자 화하기 전에 동작이 발생합니다.t
이것이 누군가에게 도움이되기를 바랍니다.
그래서 onkeyup더 나은 당신이 지금 입력 한 내용 보낼 때입니다.
답변
비슷한 요구 사항이 있습니다 (twitter 스타일 텍스트 필드). 사용 onkeyup및 onchange. onchange실제로 현장에서 초점을 잃은 동안 마우스 붙여 넣기 작업을 처리합니다.
[업데이트] HTML5 이상 oninput에서 위의 다른 답변에 설명 된대로 실시간 문자 수정 업데이트를 얻는 데 사용하십시오 .
답변
2018 년에는 input이벤트 를 사용하는 것이 좋습니다 .
–
WHATWG 사양에 설명 된대로 ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ) :
사용자가 값을 변경하면 컨트롤에서 시작됩니다 ( 변경 이벤트 참조 ).
–
사용 방법의 예는 다음과 같습니다.
<input type="text" oninput="handleValueChange()">