텍스트 상자의 내용이 변경 될 때마다 감지하고 싶습니다. 키업 방법을 사용할 수 있지만 화살표 키와 같이 문자를 생성하지 않는 키 입력도 감지합니다. keyup 이벤트를 사용 하여이 작업을 수행하는 두 가지 방법을 생각했습니다.
- 누른 키의 ASCII 코드가 letter \ backspace \ delete인지 명확하게 확인하십시오.
- 클로저를 사용하여 키 입력 전에 텍스트 상자의 텍스트를 기억하고 이것이 변경되었는지 확인하십시오.
둘 다 좀 번거로워 보인다.
답변
‘변경’대신 ‘입력’이벤트 관찰을 시작하십시오.
jQuery('#some_text_box').on('input', function() {
// do your stuff
});… 좋고 깨끗하지만 다음과 같이 더 확장 될 수 있습니다.
jQuery('#some_text_box').on('input propertychange paste', function() {
// do your stuff
});답변
HTML / 표준 JavaScript에서 onchange 이벤트를 사용하십시오.
jQuery에서 그것은 change () 이벤트입니다. 예를 들면 다음과 같습니다.
$('element').change(function() { // do something } );
편집하다
몇 가지 의견을 읽은 후 다음은 어떻습니까?
$(function() {
var content = $('#myContent').val();
$('#myContent').keyup(function() {
if ($('#myContent').val() != content) {
content = $('#myContent').val();
alert('Content has been changed');
}
});
});답변
‘change’이벤트가 올바르게 작동하지 않지만 ‘입력’은 완벽합니다.
$('#your_textbox').bind('input', function() {
/* This will be fired every time, when textbox's value changes. */
} );답변
이건 어때요:
<jQuery 1.7
$("#input").bind("propertychange change keyup paste input", function(){
// do stuff;
});> jQuery 1.7
$("#input").on("propertychange change keyup paste input", function(){
// do stuff;
});이것은 IE8 / IE9, FF, Chrome에서 작동합니다.
답변
클로저를 사용하여 키 스트로크 전에 확인란의 텍스트를 기억하고 이것이 변경되었는지 확인하십시오.
네. 클로저를 반드시 사용할 필요는 없지만 이전 값을 기억하고 새로운 값과 비교해야합니다.
하나! 키 누르기와 관련이없는 텍스트 상자 내용을 편집하는 방법이 있기 때문에 여전히 모든 변경 사항을 적용 할 수는 없습니다. 예를 들어 텍스트 범위를 선택한 다음 마우스 오른쪽 단추를 클릭하여 잘라냅니다. 또는 드래그하십시오. 또는 다른 앱에서 텍스트 상자로 텍스트를 놓기. 또는 브라우저의 맞춤법 검사를 통해 단어를 변경하십시오. 또는…
따라서 모든 변경 사항을 감지해야하는 경우 변경 사항을 폴링해야합니다. window.setInterval매초마다 이전 값과 비교하여 필드를 확인할 수 있습니다. 또한 연결할 수있는 onkeyup그 변화 때문에 동일한 기능을 하는 키 누름에 의해 발생이 빠르게 반영됩니다.
귀찮은가? 예. 그러나 그것은 정상적인 HTML onchange 방식이거나 즉시 업데이트하려고하지 않습니다.
답변
$(document).on('input','#mytxtBox',function () {
console.log($('#mytxtBox').val());
});‘입력’이벤트를 사용하여 텍스트 상자의 내용 변경을 감지 할 수 있습니다. Jquery-1.7에서 더 이상 사용되지 않으므로 ‘live’를 사용하여 이벤트를 바인딩하지 마십시오. 따라서 ‘on’을 사용하십시오.
답변
텍스트 상자가 변경 될 때 대화 형으로 무언가를 찾고 있다고 가정합니다 (즉, ajax를 통해 일부 데이터를 검색). 나는이 동일한 기능을 찾고있었습니다. 나는 글로벌을 사용하는 것이 가장 강력하거나 우아한 솔루션이 아니라는 것을 알고 있지만 이것이 내가 함께한 것입니다. 예를 들면 다음과 같습니다.
var searchValue = $('#Search').val();
$(function () {
setTimeout(checkSearchChanged, 0.1);
});
function checkSearchChanged() {
var currentValue = $('#Search').val();
if ((currentValue) && currentValue != searchValue && currentValue != '') {
searchValue = $('#Search').val();
$('#submit').click();
}
else {
setTimeout(checkSearchChanged, 0.1);
}
}여기서 주목해야 할 한 가지 사항은 동시에 여러 요청을 보내고 싶지 않기 때문에 setTimeout을 사용하고 setInterval을 사용하지 않는다는 것입니다. 이렇게하면 양식이 제출 될 때 타이머가 “중지”되고 요청이 완료되면 “시작”됩니다. 내 아약스 호출이 완료되면 checkSearchChanged를 호출 하여이 작업을 수행합니다. 분명히 당신은 최소 길이 등을 확인하기 위해 이것을 확장 할 수 있습니다.
필자의 경우 ASP.Net MVC를 사용하고 있으므로 다음 게시물에서 MVC Ajax와 연결하는 방법을 볼 수 있습니다.
