jQuery로 <input type =“text”>의 변경을 어떻게 구현합니까?


답변:


219

당신이 사용할 수있는 .change()

$('input[name=myInput]').change(function() { ... });

그러나이 이벤트는 선택기가 포커스를 잃은 경우에만 발생하므로이 작업을 수행하려면 다른 곳을 클릭해야합니다.

그것이 당신에게 적합하지 않은 경우 원하는 효과에 따라 keyup , keydown 또는 keypress 와 같은 다른 jQuery 이벤트를 사용할 수 있습니다 .


불행히도 이것은 숨겨진 입력에는 작동하지 않습니다. 숨겨진 입력에서 onchange가 필요할 때 가능한 해결책은 다음과 같습니다. <input type = '
text'style

304
참고 change입력 요소가 손실 포커스가있는 경우에만 실행됩니다. input텍스트 상자가 포커스를 잃지 않고 업데이트 될 때마다 발생 하는 이벤트 도 있습니다 . 주요 이벤트와 달리 텍스트 붙여 넣기 / 끌기에도 작동합니다.
pimvdb

4
좋은 의견 @pimvdb. 나는 이것을 사용 하여이 질문에 대한 답변으로 바꿨다.
iPadDeveloper2011

1
내가 이것을 시도하고 있고 방금 두 가지 조건이 충족 될 때만 이벤트가 발생한다는 것을 알게되었습니다. 1) 값 변경; 그리고 2) 흐림, 나는 많은 사람들이 change ()를 기대하는 것이 keyup ()으로 더 잘 처리되는지 궁금합니다.
TARKUS

changeIE9에서 지원하지 않는 것처럼 focusout, 같은 포트를 사용할 수 있습니다
Soma

247

@pimvdb가 그의 의견에서 말했듯이,

입력 요소가 포커스를 잃은 경우에만 변경 사항이 적용됩니다. 텍스트 상자가 포커스를 잃지 않고 업데이트 될 때마다 발생하는 입력 이벤트도 있습니다. 주요 이벤트와 달리 텍스트 붙여 넣기 / 끌기에도 작동합니다.

( 문서 참조 )

이것은 매우 유용하므로 답을 넣을 가치가 있습니다. 현재 (v1.8 *?) jquery에는 .input () 편의 fn이 없으므로 수행 방법은 다음과 같습니다.

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

6
특히, IE <9는 전혀 지원하지 않습니다.
dlo April

13
여러 이벤트에 바인딩 할 수 있기 때문에 $('form').on('change input', function);속임수가되었습니다. 감사.
justnorris

9
@ 노리스. 요소가 변경되면 (첫 번째) 초점이 사라집니다 (두 번째). 그것은 많은 목적을위한 문제는 아니지만 그럼에도 불구하고 주목할 가치가 있습니다.
iPadDeveloper2011

IE9에서 테스트 한 백 스페이스는 실행되지 않습니다
Jaskey

이것은 모든 입력 변경 (당신이 찾고있는 것일 수도 있음)에 대해 발생합니다. 그러나 "변경이 끝났을 때"와 같은 이벤트를 찾고 있다면 여기 좋은 예가 있습니다.
Trevor Nestman

79

다음과 같이 키업 이벤트를 사용하는 것이 좋습니다.

$('elementName').keyup(function() {
 alert("Key up detected");
});

동일한 결과를 얻는 몇 가지 방법이 있으므로 선호도에 달려 있고 정확하게 작동하는 방법에 달려 있습니다.

업데이트 : 복사 및 붙여 넣기가 아닌 수동 입력에만 작동합니다.

복사하여 붙여 넣으려면 다음을 권장합니다.

$('elementName').on('input',function(e){
 // Code here
});

나는 텍스트 입력을 위해 이것을 추천합니다!
Vercas

20
입력 요소의 내용은 키업을 발생시키지 않고 변경할 수 있습니다. 예를 들어 마우스를 사용하여 텍스트를 붙여 넣을 수 있습니다.
celicni

또한, 변화는 여전히 캡처 체크 박스에 필요한 것
turbo2oh

30

내가 사용하는 코드는 다음과 같습니다.

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

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

이것은 특히 jqGrid컨트롤 과 쌍을 이룰 때 아주 잘 작동합니다 . 텍스트 상자에 입력하고 의 결과를 즉시 볼 수 있습니다 jqGrid.


22

작업을 수행하는 신뢰할 수있는 방법은 단 하나 뿐이며 간격에서 값을 가져 와서 캐시 된 값과 비교하는 것입니다.

이것이 유일한 방법 인 이유는 다양한 입력 (키보드, 마우스, 붙여 넣기, 브라우저 기록, 음성 입력 등)을 사용하여 입력 필드를 변경하는 여러 가지 방법이 있기 때문에 표준 이벤트를 사용하여 십자가에서 모든 것을 감지 할 수 없기 때문입니다. 브라우저 환경.

다행히 jQuery의 이벤트 인프라 덕분에 자체 입력 변경 이벤트를 쉽게 추가 할 수 있습니다. 나는 여기에서 그렇게했다 :

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

다음과 같이 사용하십시오. $('input').on('inputchange', function() { console.log(this.value) });

여기 데모가 있습니다 : http://jsfiddle.net/LGAWY/

여러 간격을 무서워하는 경우 바인딩 해제 /에이 이벤트에 바인딩 할 수 있습니다 focus/을 blur.


코드를 다음과 같이 작동시킬 수 $('body').on('inputchange', 'input', function() { console.log(this.value) });있습니까? 또는 여기에 언급되지 않은 것처럼 : github.com/EightMedia/hammer.js/pull/98 ?
TheFrost

13
이러한 코드를 작성하고 시작하는 것은 성능에 심각한 영향을 미칩니다.
Danubian Sailor

@ ŁukaszLech 제발 알려주세요. 그러나 내가 언급했듯이 초점 / 흐림 이벤트를 칠 경우 간격은 일시적으로 만 실행됩니다. 확실히, 1988 년의 인텔 386조차도 단일 간격을 처리 할 수 ​​있습니까?
David Hellsing

5
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

this전체 요소에 액세스하려면이 요소를 사용하여 필요한 모든 것을 수행 할 수 있도록 키워드를 사용하는 것이 좋습니다 .


4

다음은 동적 / Ajax 호출 인 경우에도 작동합니다.

스크립트:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

HTML,

<input class="addressCls" type="text" name="address" value="" required/>

이 작업 코드가 동적 / Ajax 호출에 액세스하려는 사람에게 도움이되기를 바랍니다.


3
$("input").keyup(function () {
    alert("Changed!");
});

2

당신은 단순히 ID로 작업 할 수 있습니다

$("#your_id").on("change",function() {
    alert(this.value);
});

이것은 기존 답변에별로 추가되지 않습니다.
Pang

2

다른 방법으로이 작업을 수행 할 수 있습니다 . 키 업은 그 중 하나입니다. 그러나 나는 변화와 함께 아래에 예를주고있다.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB : input [name = "vat_id"]는 입력 ID 또는 이름으로 바꿉니다 .


2

당신이 이벤트 트리거 할 경우 입력 할 때를 , 다음을 사용 :

$('input[name=myInput]').on('keyup', function() { ... });

입력 필드떠날 때 이벤트를 트리거 하려면 다음을 사용하십시오.

$('input[name=myInput]').on('change', function() { ... });

어떤 이유로 든 이것은 나에게 효과가 없었지만 다음과 같이 작동했습니다.$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan

1
@Stefan, 예제의 코드를 이벤트 위임이라고합니다. 페이지 초기화 후에 입력 필드가 추가되어 있어야하므로 내 코드가 작동하지 않습니다.
Usman Ahmed


1

이것은 나를 위해 일했습니다. 이름이 fieldA 인 필드를 클릭하거나 키를 입력하면 id fieldB로 필드를 업데이트합니다 .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

0

사용할 수 있습니다 .keypress().

예를 들어 HTML을 고려하십시오.

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

이벤트 핸들러는 입력 필드에 바인딩 될 수 있습니다.

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

나는 앤디에게 전적으로 동의한다. 모두 작동 방식에 달려 있습니다.


1
복사 / 붙여 넣기 작업에는 작동하지 않습니다. 마우스 클릭으로 텍스트를 붙여 넣으면 이벤트가 발생하지 않습니다.
DaveN59
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.