변경 시 어떻게 구현합니까?변경 시 어떻게 구현합니까?jQuery와 함께?jQuery와 함께?

변경 시 어떻게 구현합니까?jQuery와 함께?

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

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

입력 요소가 초점을 잃었을 때만 변경이 발생합니다.텍스트 상자가 업데이트될 때마다 초점을 잃지 않고 실행되는 입력 이벤트도 있습니다.주요 이벤트와 달리 텍스트를 붙여넣거나 끌 때도 사용할 수 있습니다.

(설명서 참조).

이것은 매우 유용합니다, 답변에 넣을 가치가 있습니다.현재 (v1.8*?) jquery에 .input() 편의 fn이 없어서 방법은

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

사용할 수 있습니다.

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

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

사용자에게 적합하지 않은 경우, 원하는 정확한 효과에 따라 키업, 키다운 또는 키 누르기와 같은 다른 jQuery 이벤트를 사용할 수 있습니다.

아래와 같은 키업 이벤트를 사용할 것을 제안합니다.

$('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" />

이 기능은 특히 a와 짝을 이룰 때 매우 잘 작동합니다.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키워드를 사용하여 이 요소로 필요한 모든 작업을 수행할 수 있도록 전체 요소에 액세스할 수 있습니다.

입력할 때 이벤트를 트리거하려면 다음을 사용합니다.

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

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

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

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

스크립트:

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

Html,

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

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

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

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

다양한 방법으로 이 작업을 수행할 수 있습니다. 키업이 그 중 하나입니다.하지만 저는 변화에 대한 예를 아래에 제시합니다.

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

NB: 입력[name="input_id"]을(를) 입력 ID 또는 이름으로 바꿉니다.

당신은 간단하게 id로 작업할 수 있습니다.

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

이것은 저에게 효과가 있었습니다.이름 필드 A가 있는 필드를 클릭하거나 키가 입력된 경우 ID 필드 B가 있는 필드를 업데이트합니다.

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

당신은 할 수 있습니다.

예를 들어 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.");
});

나는 앤디의 말에 전적으로 동의합니다. 모든 것은 당신이 그것이 어떻게 작동하기를 원하느냐에 달려 있습니다.

언급URL : https://stackoverflow.com/questions/1443292/how-do-i-implement-onchange-of-input-type-text-with-jquery