텍스트 상자의 내용을 감지하는 방법이 변경되었습니다

텍스트 상자의 내용이 변경 될 때마다 감지하고 싶습니다. 키업 방법을 사용할 수 있지만 화살표 키와 같이 문자를 생성하지 않는 키 입력도 감지합니다. keyup 이벤트를 사용 하여이 작업을 수행하는 두 가지 방법을 생각했습니다.

1. 누른 키의 ASCII 코드가 letter \ backspace \ delete인지 명확하게 확인하십시오.
2. 클로저를 사용하여 키 입력 전에 텍스트 상자의 텍스트를 기억하고 이것이 변경되었는지 확인하십시오.

둘 다 좀 번거로워 보인다.

'변경'대신 '입력'이벤트 관찰을 시작하십시오.

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와 연결하는 방법을 볼 수 있습니다.

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

jQuery UI 자동 완성 위젯을 살펴 보는 것이 좋습니다. 코드베이스가 대부분의 코드베이스보다 성숙하기 때문에 대부분의 경우를 처리했습니다.

아래는 데모 페이지에 대한 링크이므로 작동하는지 확인할 수 있습니다. http://jqueryui.com/demos/autocomplete/#default

소스를 읽고 그들이 어떻게 해결했는지를 보면 가장 큰 이점을 얻을 수 있습니다. https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js에서 찾을 수 있습니다 .

기본적으로 그들은 모든 것을하고 바인딩합니다 input, keydown, keyup, keypress, focus and blur. 그런 다음과 같은 모든 종류의 키를 특수하게 처리합니다 page up, page down, up arrow key and down arrow key. 텍스트 상자의 내용을 가져 오기 전에 타이머가 사용됩니다. 사용자가 명령에 해당하지 않는 키 (위쪽 키, 아래쪽 키 등)를 입력하면 약 300 밀리 초 후에 내용을 탐색하는 타이머가 있습니다. 코드에서 다음과 같이 보입니다.

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

타이머를 사용하는 이유는 UI가 업데이트 될 수 있도록하기 위해서입니다. Javascript가 실행 중이면 UI를 업데이트 할 수 없으므로 지연 함수를 호출합니다. 이것은 텍스트 상자에 초점을 맞추는 것과 같은 다른 상황에서 잘 작동합니다 (해당 코드에서 사용).

따라서 jQuery UI를 사용하지 않는 경우 (또는 제 경우에는 사용자 정의 위젯을 개발하는 경우) 위젯을 사용하거나 코드를 자신의 위젯에 복사 할 수 있습니다.

텍스트 상자의 내용이 실시간으로 변경된 시점을 감지하려고하는 이유를 묻고 싶습니다 .

대안은 (setIntval?을 통해) 타이머를 설정하고 마지막으로 저장된 값을 현재 값과 비교 한 다음 타이머를 재설정하는 것입니다. 이렇게하면 키, 마우스, 고려하지 않은 다른 입력 장치 또는 앱의 다른 부분에서 값을 변경하는 JavaScript (아무도 언급 할 수없는 다른 가능성)로 인한 모든 변경 사항을 잡을 수 있습니다.

변경 이벤트 사용을 고려 하십니까?

$("#myTextBox").change(function() { alert("content changed"); });

textchange브라우저 간 input호환성을 위해 사용자 정의 된 jQuery shim을 통해 이벤트를 사용하십시오 . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (가장 최근 분기 된 github : https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

이것은 등을 포함하여 <textarea>content</textarea>항상 작동하지 않는을 포함하여 모든 입력 태그를 처리합니다 change keyup. (!) jQuery 만 태그를 일관되게 on("input propertychange")처리 <textarea>하며 위는 input이벤트를 이해하지 못하는 모든 브라우저에 대한 shim입니다 .

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS 빈 테스트

또한 붙여 넣기, 삭제 및 키업 작업을 복제하지 않습니다.

shim을 사용하지 않는 경우 jQuery on("input propertychange")이벤트를 사용하십시오 .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

여기에 완전한 작업 예제가 있습니다 .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

이런 식으로 뭔가 작업을해야합니다, 때문에 주로 focus하고 focusout두 개의 별도의 값으로 끝낼 것입니다. data요소에 값을 저장하지만 DOM을 건드리지 않기 때문에 여기에서 사용하고 있습니다. 또한 요소에 연결된 값을 저장하는 쉬운 방법입니다. 더 높은 범위의 변수를 쉽게 사용할 수 있습니다.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

이 코드는 텍스트 상자의 내용이 사용자에 의해 변경되고 Javascript 코드에 의해 수정 될 때마다 감지합니다.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);