jQuery를 사용하여 의 change를 구현하려면 어떻게합니까?

Question

<select> 이 API가 있습니다. 는 어때 <input>?

Answer 1

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

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

그러나이 이벤트는 선택기가 초점을 잃었을 때만 발사 되므로이 작업을 수행하려면 다른 곳을 클릭해야합니다.

그것이 당신에게 옳지 않다면, 당신은 다른 것을 사용할 수 있습니다. jQuery 이벤트 처럼 키 업, 키 다운 또는 키 누름 - 원하는 정확한 효과에 따라.

Answer 2

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

입력 요소가 초점을 잃었을 때만 변경이 발생합니다. 텍스트 상자가 초점을 잃지 않아도 업데이트 될 때마다 발사되는 입력 이벤트도 있습니다. 주요 이벤트와 달리 텍스트를 붙여 넣거나 드래그하는데도 효과가 있습니다.

(보다 선적 서류 비치.)

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

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

Answer 3

KeyUp 이벤트를 아래와 같은 사용하는 것이 좋습니다.

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

동일한 결과를 달성하는 몇 가지 방법이 있으므로 선호하는 것이 좋으며 정확히 작동하는 방식에 따라 다릅니다.

업데이트 : 이것은 복사 및 붙여 넣기가 아닌 수동 입력에만 적용됩니다.

복사 및 붙여 넣기의 경우 다음을 권장합니다.

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

Answer 4

다음은 내가 사용하는 코드입니다.

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

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

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

이것은 특히 jqGrid 제어. 텍스트 상자에 입력 할 수 있습니다 즉시 당신의 결과를보십시오 jqGrid.

Answer 5

거기 있습니다 이 작업을 수행하는 신뢰할 수있는 하나의 유일한 방법, 그리고 그것은 값을 간격으로 가져와 캐시 된 값과 비교하는 것입니다.

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

운 좋게도 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.

Answer 6

<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 키워드 전체 요소에 액세스 하여이 요소로 필요한 모든 것을 수행 할 수 있도록 키워드.

Answer 7

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

Answer 8

다음은 동적/Ajax 호출이더라도 작동합니다.

스크립트:

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

html,

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

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

Answer 9

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

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

Answer 10

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

Answer 11

이것은 나를 위해 효과가있었습니다. 이름이있는 필드 필드 클릭하거나 키를 입력 한 모든 키가 ID로 업데이트 필드를 입력했습니다. Fieldb.

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

Answer 12

당신은 사용할 수 있습니다 .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.");
});

나는 Andy와 완전히 동의합니다. 모든 것은 당신이 그것이 어떻게 작동하기를 원하는지에 달려 있습니다.

Answer 13

당신은 다른 방식으로 이것을 할 수 있습니다. 키 업 그들 중 하나입니다. 그러나 나는 아래의 변화와 함께 예를 제시하고 있습니다.

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

NB : 입력 [이름 = "vat_id" 입력으로 교체하십시오 ID 또는 이름.