jQuery에서 입력 변경을 감지하고 있습니까?


359

이벤트 .change에서 jquery 를 사용 input하면 입력이 포커스를 잃을 때만 발생합니다.

필자의 경우 입력 값이 변경되는 즉시 서비스를 호출해야합니다 (값이 유효한지 확인하십시오). 어떻게하면 되나요?


3
어떤 종류의 입력? 텍스트 상자? 확인란? 라디오? 텍스트 영역? 당신이 지금까지 무엇을 생각해 보자
Patricia

죄송합니다. 텍스트 유형이 입력되었습니다. 그리고 내가 말했듯이, 나는 변화를 시도했지만 이것이 내가 원하는 방식으로 실행되지는 않습니다 (입력 텍스트의 모든 변화에 대해). 나는 또한 키 다운을 시도했지만이 작업을 수행하려면 입력이 "더러운"지 여부를 추적해야합니다.
밴시

2
키를 누르면 시간의 99 %가 변경되며 이벤트 핸들러에없는 키를 항상 확인할 수 있습니다.
Patricia

답변:


545

설명과 예제를 위해 업데이트

예 : 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시작하고 특정 입력 필드에 대한 타이머를 중지하는 이벤트를


이 솔루션에 대해 더 자세히 설명해 주시겠습니까? 현재 가치는 어떻게 얻습니까? 현재 값을 변경했을 때만 이것을 실행하려면 어떻게해야합니까?
밴시

입력 이벤트? (아직) ... jQuery를에는 입력 이벤트 없다 stackoverflow.com/q/11189136/104380
VSYNC

방법이 들어 나는 보통의 keyup 모두에 결합 하고 변화. 이렇게하면 키 누르기 (예 : 붙여 넣기)없이 입력이 발생하면 입력에 포커스가 없으면 이벤트가 발생합니다.
rspeed

1
@AdiDarachi MutationObserver는 DOM 요소의 변경 사항을 추적합니다. 그러나 입력 필드에서 데이터를 변경하는 사용자는 MutationObserver 변경을 트리거하지 않습니다 ... 테스트 케이스를 설정하면 JS 코드가 innerText또는 value속성 (사용자 입력 시뮬레이션)으로 변경되어 MutationObserver 이벤트가 트리거됩니다 jsfiddle.net/pxfunc/ 04chgpws / 1 (MutationObserver 이벤트 로깅에 대해서는 console.log를 참조하십시오). 내가 볼 수있는 다른 테스트 사례가 있습니까?
MikeM

1
스크립트가 값을 변경하면 작동하지 않습니다
FalcoGer

189

HTML5가있는 경우 :

  • oninput (실제로 변경이 발생할 때만 발생하지만 즉시 변경됩니다)

그렇지 않으면 입력 요소의 값이 변경되었음을 나타내는 이러한 모든 이벤트를 확인해야합니다.

  • onchange
  • onkeyup( 하지 keydown 또는 keypress입력의 값은 아직 새로운 키 입력이없는 것 같이)
  • onpaste (지원되는 경우)

그리고 아마도 :

  • onmouseup (나는 이것에 대해 확실하지 않다)

내 테스트에서 @naomik은 확인란 입력에 작동합니다. IE / Edge를 제외하고. 다른 예외가 나타날 수도 있지만 해당 입력 유형 (IMHO)에 대해 onchange를 사용하는 것이 더 현명합니다.
HellBaby

82

jQuery를 사용하지 않고 HTML5를 사용하면 input이벤트 를 사용할 수 있습니다 .

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

입력 텍스트가 바뀔 때마다 발생합니다.

IE9 + 및 기타 브라우저에서 지원됩니다.

여기서 jsFiddle에 라이브로 사용해보십시오 .



1
'change'는 텍스트가 변경 될 때가 아니라 흐림에서만 발생합니다. '입력'이벤트를 사용하여 텍스트 변경을 감지하십시오.
Dermot Doherty

14

다른 사람들이 이미 제안했듯이 귀하의 경우 해결책은 여러 이벤트스니핑하는 것 입니다.
이 작업을 수행하는 플러그인은 종종 다음 이벤트를 수신합니다.

$ 입력 . on ( '키 다운 키 누르기 키업 mousedown click mouseup' , handler );

당신이 적합 할 수 있습니다 생각한다면, 당신은 추가 할 수 있습니다 focus, blur너무 다른 이벤트.
나는 브라우저 메모리에 사용자의 행동에 따라 실행할 추가 절차를로드하기 때문에 이벤트를 초과하지 않는 것이 좋습니다.

주의 : JavaScript로 입력 요소의 값을 변경하면 (예 : jQuery .val()메소드를 통해 ) 위의 이벤트가 발생하지 않습니다.
(참조 : https://api.jquery.com/change/ ).


또한 자동 완성 문제를 피하기 위해 포커스 아웃을 추가하는 것이 좋습니다
binar

내가 참조. 검색했으며 포커스 아웃은 IE에서만 지원되고 부분적으로 Chrome에서만 지원되는 것 같습니다.
Emanuele Del Grande

5
간단한 추가로, jQuery에서 이벤트를 발생시키기 .val()위해 입력 필드에서 변경 이벤트를 수행 한 후 해당 조치를 호출 할 수 있습니다 . $('#element').val(whatever).change()
techknowcrat

2

요소 내에서 무언가가 변경 될 때마다 이벤트가 시작되도록하려면 keyup 이벤트를 사용할 수 있습니다 .


알았지 만 이것은 키 다운과 거의 같지 않습니까? 입력이 "더러운"지 확인해야합니까?
밴시

@SnowJim 입력이 실제로 변경 될 때만 물건을 원한다면을 사용 onchange하거나 직접 상태를 추적해야합니다. 입력 상태가 변경 되기 전에keydown 발생 하기 때문에 작동하지 않습니다 .
Alnitak

@Alnitak exacly 그리고 그게 내가 여기서 질문을하는 이유입니다. onchange가 작동하지 않습니다. 입력을 떠날 때만 발생합니다.
밴시

물론 방 안에있는 코끼리는 움직일 수 있습니다. 키보드 나 마우스 이벤트가 많이 사용되지 않도록하십시오. : p
Askdesigners 2016 년

@Askdesigners 키업 / 다운 이벤트는 여전히 모바일에서 동일한 방식으로 작동해야합니다.
Jivings

2

// 요소가 포커스를 잃으면 .blur가 트리거됩니다

$('#target').blur(function() {
  alert($(this).val());
});

// 수동으로 트리거하려면 :

$('#target').blur();

1
.change는 입력이 포커스를 잃고 값이 변경 될 때만 발생한다고 말했듯이 입력 (텍스트)이 변경되는 즉시 (입력의 텍스트가 변경되는 즉시) 짝수를 가져와야합니다. 블러는 입력이 포커스를 잃을 때만 트리거됩니다.
밴시

1

입력 HTML 요소와 함께 사용할 수있는 keyupkeypress 와 같은 jQuery 이벤트가 있습니다 . blur () 이벤트를 추가로 사용할 수 있습니다 .


1
.change는 입력이 포커스를 잃고 값이 변경 될 때만 발생한다고 말했듯이 입력 (텍스트)이 변경되는 즉시 (입력의 텍스트가 변경되는 즉시) 짝수를 가져와야합니다. 블러는 입력이 포커스를 잃을 때만 트리거됩니다.
밴시

1
keypress누른 키는 해당 값을 아직 변경하지 않았으므로 이벤트 중에 입력 값을 안정적으로 확인할 수 없습니다 .
Alnitak

0

여기에는 jQuery 1.7 이상을 사용하는 모든 입력 변경 사항이 포함됩니다.

$(".inputElement").on("input", null, null, callbackFunction);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.