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

Program / 글쓴이

<select>이 API가 있습니다. 무엇에 대해 <input>?

답변

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

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

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

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

답변

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

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

( 문서 참조 )

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

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

답변

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

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

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

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

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

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

답변

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

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

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

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

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

답변

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

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

다행히 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.

답변

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

답변

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

스크립트:

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

HTML,

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

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