답변:
당신이 사용할 수있는 .change()
$('input[name=myInput]').change(function() { ... });
그러나이 이벤트는 선택기가 포커스를 잃은 경우에만 발생하므로이 작업을 수행하려면 다른 곳을 클릭해야합니다.
그것이 당신에게 적합하지 않은 경우 원하는 효과에 따라 keyup , keydown 또는 keypress 와 같은 다른 jQuery 이벤트를 사용할 수 있습니다 .
change
입력 요소가 손실 포커스가있는 경우에만 실행됩니다. input
텍스트 상자가 포커스를 잃지 않고 업데이트 될 때마다 발생 하는 이벤트 도 있습니다 . 주요 이벤트와 달리 텍스트 붙여 넣기 / 끌기에도 작동합니다.
change
IE9에서 지원하지 않는 것처럼 focusout
, 같은 포트를 사용할 수 있습니다
@pimvdb가 그의 의견에서 말했듯이,
입력 요소가 포커스를 잃은 경우에만 변경 사항이 적용됩니다. 텍스트 상자가 포커스를 잃지 않고 업데이트 될 때마다 발생하는 입력 이벤트도 있습니다. 주요 이벤트와 달리 텍스트 붙여 넣기 / 끌기에도 작동합니다.
( 문서 참조 )
이것은 매우 유용하므로 답을 넣을 가치가 있습니다. 현재 (v1.8 *?) jquery에는 .input () 편의 fn이 없으므로 수행 방법은 다음과 같습니다.
$('input.myTextInput').on('input',function(e){
alert('Changed!')
});
$('form').on('change input', function);
속임수가되었습니다. 감사.
다음과 같이 키업 이벤트를 사용하는 것이 좋습니다.
$('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
.
$('body').on('inputchange', 'input', function() { console.log(this.value) });
있습니까? 또는 여기에 언급되지 않은 것처럼 : github.com/EightMedia/hammer.js/pull/98 ?
<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() { ... });
$(document).on('change', 'input[name=myInput]', function() { ... });
$("input").change(function () {
alert("Changed!");
});
사용할 수 있습니다 .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.");
});
나는 앤디에게 전적으로 동의한다. 모두 작동 방식에 달려 있습니다.