이벤트 .change
에서 jquery 를 사용 input
하면 입력이 포커스를 잃을 때만 발생합니다.
필자의 경우 입력 값이 변경되는 즉시 서비스를 호출해야합니다 (값이 유효한지 확인하십시오). 어떻게하면 되나요?
이벤트 .change
에서 jquery 를 사용 input
하면 입력이 포커스를 잃을 때만 발생합니다.
필자의 경우 입력 값이 변경되는 즉시 서비스를 호출해야합니다 (값이 유효한지 확인하십시오). 어떻게하면 되나요?
답변:
설명과 예제를 위해 업데이트
예 : http://jsfiddle.net/pxfunc/5kpeJ/
방법 1. input
이벤트
최신 브라우저에서는 input
이벤트를 사용합니다 . 이 이벤트는 사용자가 텍스트 필드에 입력하고 붙여 넣거나 실행 취소 할 때 기본적으로 값이 한 값에서 다른 값으로 변경 될 때 발생합니다.
jQuery에서 다음과 같이하십시오.
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
jQuery를 1.7로 시작, 대체 bind
와 함께 on
:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
방법 2. keyup
이벤트
구형 브라우저의 keyup
경우 이벤트를 사용합니다 (키보드에서 키를 놓으면 실행됩니다).이 이벤트는 "w"를 놓으면 입력 값이 변경되고 keyup
이벤트가 발생하지만 "shift"키가 해제되면 keyup
이벤트가 발생하지만 입력에는 아무런 변화가 없습니다.). 또한 사용자가 컨텍스트 메뉴에서 마우스 오른쪽 버튼을 클릭하여 붙여 넣을 경우이 방법이 실행되지 않습니다.
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
방법 3. 타이머 ( setInterval
또는 setTimeout
)
한계를 극복하기 위해 keyup
입력 값을 주기적으로 확인하여 값 변경을 결정하도록 타이머를 설정할 수 있습니다. 이 타이머 확인을 사용 setInterval
하거나 setTimeout
수행 할 수 있습니다 . 표시된이 SO 질문에 대답을 참조하십시오 : jQuery를 텍스트 상자 변경 이벤트를 또는 사용하여 작업 예를 들어 바이올린을 참조 focus
하고 blur
시작하고 특정 입력 필드에 대한 타이머를 중지하는 이벤트를
innerText
또는 value
속성 (사용자 입력 시뮬레이션)으로 변경되어 MutationObserver 이벤트가 트리거됩니다 jsfiddle.net/pxfunc/ 04chgpws / 1 (MutationObserver 이벤트 로깅에 대해서는 console.log를 참조하십시오). 내가 볼 수있는 다른 테스트 사례가 있습니까?
HTML5가있는 경우 :
oninput
(실제로 변경이 발생할 때만 발생하지만 즉시 변경됩니다)그렇지 않으면 입력 요소의 값이 변경되었음을 나타내는 이러한 모든 이벤트를 확인해야합니다.
onchange
onkeyup
( 하지 keydown
또는 keypress
입력의 값은 아직 새로운 키 입력이없는 것 같이)onpaste
(지원되는 경우)그리고 아마도 :
onmouseup
(나는 이것에 대해 확실하지 않다)jQuery를 사용하지 않고 HTML5를 사용하면 input
이벤트 를 사용할 수 있습니다 .
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
입력 텍스트가 바뀔 때마다 발생합니다.
IE9 + 및 기타 브라우저에서 지원됩니다.
여기서 jsFiddle에 라이브로 사용해보십시오 .
다른 사람들이 이미 제안했듯이 귀하의 경우 해결책은 여러 이벤트 를 스니핑하는 것 입니다.
이 작업을 수행하는 플러그인은 종종 다음 이벤트를 수신합니다.
$ 입력 . on ( '키 다운 키 누르기 키업 mousedown click mouseup' , handler );
당신이 적합 할 수 있습니다 생각한다면, 당신은 추가 할 수 있습니다 focus
, blur
너무 다른 이벤트.
나는 브라우저 메모리에 사용자의 행동에 따라 실행할 추가 절차를로드하기 때문에 이벤트를 초과하지 않는 것이 좋습니다.
주의 : JavaScript로 입력 요소의 값을 변경하면 (예 : jQuery .val()
메소드를 통해 ) 위의 이벤트가 발생하지 않습니다.
(참조 : https://api.jquery.com/change/ ).
.val()
위해 입력 필드에서 변경 이벤트를 수행 한 후 해당 조치를 호출 할 수 있습니다 . $('#element').val(whatever).change()
요소 내에서 무언가가 변경 될 때마다 이벤트가 시작되도록하려면 keyup 이벤트를 사용할 수 있습니다 .
onchange
하거나 직접 상태를 추적해야합니다. 입력 상태가 변경 되기 전에keydown
발생 하기 때문에 작동하지 않습니다 .