복붙노트

[JQUERY] 어떻게 텍스트 상자의 내용을 감지하는 방법 변경

JQUERY

어떻게 텍스트 상자의 내용을 감지하는 방법 변경

해결법

  1. 1.대신 '변화'의 '입력'이벤트를 관찰 시작합니다.

    대신 '변화'의 '입력'이벤트를 관찰 시작합니다.

    jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

    ... 좋고 깨끗하지만,에 더 연장 될 수있다 :

    jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

  2. 2.HTML / 표준 자바 스크립트에서 onchange를 이벤트를 사용합니다.

    HTML / 표준 자바 스크립트에서 onchange를 이벤트를 사용합니다.

    jQuery를에서의 변화 () 이벤트입니다. 예를 들면 :

    $ ( '요소')의 변화 (함수 () {// 무언가}).;

    편집하다

    어떤 의견, 무엇인지를 읽은 후 :

    $(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

  3. 3.'변화'이벤트가 제대로 작동하지 않지만, '입력'완벽합니다.

    '변화'이벤트가 제대로 작동하지 않지만, '입력'완벽합니다.

    $('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

  4. 4.이것은 어떤가요:

    이것은 어떤가요:

    $("#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, 크롬에서이 작품

  5. 5.네. 당신은 반드시 클로저를 사용할 필요가 없습니다,하지만 당신은 이전 값을 기억해야합니다하고 새로운 비교.

    네. 당신은 반드시 클로저를 사용할 필요가 없습니다,하지만 당신은 이전 값을 기억해야합니다하고 새로운 비교.

    하나! 이것은 여전히, 모든 변화를 따라 잡을 수 없기 때문에이 모든 키 누름을 포함하지 않는 텍스트 상자의 내용을 편집하는 방법을. 예를 들어 다음 텍스트의 범위를 마우스 오른쪽 단추로 클릭 한 컷을 선택. 또는 드래그. 또는 텍스트 상자에 다른 응용 프로그램에서 텍스트를 삭제. 또는 브라우저의 맞춤법 검사를 통해 단어를 변경. 또는...

    당신이 모든 변화를 감지해야하는 경우 그래서, 당신은 그것을 위해 투표해야합니다. 당신은 window.setInternal을은 이전 값에 대한 모든 (말) 두 번째 필드를 확인 할 수있다. 또한 키 누름에 의해 발생하는 변화가 빨리 반영되도록 동일한 기능에 onKeyUp에 연결할 수 있습니다.

    성가신? 예. 그러나하거나 그것을 방법 onchange를 일반 HTML을하고 즉시 업데이트를 시도하지 않는 것이 있습니다.

  6. 6.

    $(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

    당신은 텍스트 상자의 내용 변화를 감지하기 위해 '입력'이벤트를 사용할 수 있습니다. 이 jQuery를-1.7에서 사용되지 않는 한, 이벤트를 바인딩하는 '라이브'사용 '에'의 메이크업 사용 그래서하지 마십시오.

  7. 7.난 당신이 텍스트 상자 변경 (즉, 아약스를 통해 일부 데이터를 검색) 할 때 상호 작용하는 뭔가를 찾고있는 것으로 가정합니다. 나는이 같은 기능을 찾고 있었다. 나는 세계에서 가장 강력한 또는 우아한 해결책이 아니다 사용하여 알고 있지만, 내가 갔다 것입니다. 다음은 그 예이다 :

    난 당신이 텍스트 상자 변경 (즉, 아약스를 통해 일부 데이터를 검색) 할 때 상호 작용하는 뭔가를 찾고있는 것으로 가정합니다. 나는이 같은 기능을 찾고 있었다. 나는 세계에서 가장 강력한 또는 우아한 해결책이 아니다 사용하여 알고 있지만, 내가 갔다 것입니다. 다음은 그 예이다 :

    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를 호출하여이 작업을 수행. 분명히 당신은 최소 길이 등을 확인하려면이 옵션을 확장 할 수

    내 경우, 나는 당신이 잘 다음 게시물로 MVC 아약스와 함께이 넥타이를하는 방법을 볼 수 있도록 ASP.Net MVC를 사용하고 있습니다 :

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

  8. 8.내가 jQuery를 UI 자동 완성 위젯에서 살펴 보는 것이 좋습니다. 그들은 그들의 코드 기반이기 때문에 대부분의 경우가 더 많은 것이 밖으로 대부분의 사람보다이 성숙 처리.

    내가 jQuery를 UI 자동 완성 위젯에서 살펴 보는 것이 좋습니다. 그들은 그들의 코드 기반이기 때문에 대부분의 경우가 더 많은 것이 밖으로 대부분의 사람보다이 성숙 처리.

    당신이 작동 확인할 수 있도록 아래 데모 페이지에 대한 링크입니다. http://jqueryui.com/demos/autocomplete/#default

    그들은 그것을 해결하는 방법 당신은 소스를 읽고 보는 가장 이익을 얻을 것이다. 당신은 여기에서 찾을 수 있습니다 https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js를.

    기본적으로 그들은 바인드 입력,를 keyDown,의 keyup, 키를 누를 때, 초점 흐림, 모든 작업을 수행 할 수 있습니다. 그렇다면 그들이 최대 화살표 키를 아래로 화살표 키와, 페이지 업, 페이지 다운 등의 키를 모든 종류의 특수 처리를해야합니다. 타이머는 텍스트 상자의 내용을 얻기 전에 사용된다. 사용자 유형 (키까지, 키 다운 등) 명령에 해당하지 않는 키가 타이머가있을 때 그 탐험가 (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를 업데이트 할 수있는 기회를 얻을 수 있도록합니다. 자바 스크립트 UI를 실행중인 경우, 지연 함수에 따라서 전화를 업데이트 할 수 없습니다. 이것은 (그 코드에 의해 사용) 텍스트 상자에 초점을 유지하는 등의 다른 상황에 적합합니다.

    당신이 jQuery를 UI를 사용하여 (또는 내 경우 사용자 정의 위젯을 개발)하지 않으면 당신도 위젯을 사용하거나 자신의 위젯에 코드를 복사 할 수 있습니다.

  9. 9.난 당신이 텍스트 상자의 내용이 실시간으로 변경 때를 감지하려고하는 이유를 묻고 싶습니다?

    난 당신이 텍스트 상자의 내용이 실시간으로 변경 때를 감지하려고하는 이유를 묻고 싶습니다?

    대안은 (setIntval?를 통해) 타이머를 설정하고 현재에 마지막으로 저장된 값을 비교 한 후 타이머를 재설정하는 것입니다. 이것은 키, 마우스에 의해 발생 여부, 어떤 변화를 잡기 보장 할 응용 프로그램의 다른 부분에서 다른 입력 장치 당신은 고려하지 않았거나 심지어 자바 스크립트 값을 변경 (다른 possiblity가 아무도 언급하지 않음).

  10. 10.당신은 변경 이벤트 사용을 고려합니까?

    당신은 변경 이벤트 사용을 고려합니까?

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

  11. 11.크로스 브라우저 입력 호환성을 위해 사용자 정의 jQuery를 심을 통해 textchange 이벤트를 사용합니다. 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)

    크로스 브라우저 입력 호환성을 위해 사용자 정의 jQuery를 심을 통해 textchange 이벤트를 사용합니다. 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)

    이 핸들을 포함하여 모든 입력 태그 <텍스트 영역> 내용 변경의 keyup 등 (!) ( "입력에 PropertyChange") 핸들 <텍스트 영역> 태그 일관하고 위에서만 jQuery를 항상 일을하지 않는 심 (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>

    이 또한 핸들은 삭제 붙여의 keyup에 중복 노력을하지 않습니다.

    심 (shim)을 사용하지 않는 경우 ( "입력에 PropertyChange") 이벤트에 jQuery를 사용합니다.

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

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

  12. 12.여기에 전체 작업 예제가있다.

    여기에 전체 작업 예제가있다.

    <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>

  13. 13.초점과 대한 focusOut 두 개의 별도 값으로 끝날 것 때문에 주로 이런 식으로 뭔가가 작동합니다. 이 요소의 값을 저장하지만, DOM을 터치하지 않기 때문에 나는 여기에 데이터를 사용하고 있습니다. 또한 그 요소에 연결된 값을 저장하는 쉬운 방법입니다. 당신은 쉽게 더 높은 범위의 변수를 사용할 수 있습니다.

    초점과 대한 focusOut 두 개의 별도 값으로 끝날 것 때문에 주로 이런 식으로 뭔가가 작동합니다. 이 요소의 값을 저장하지만, 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);
}

  14. 14.텍스트 상자의 내용이 사용자에 의해 변경 및 자바 스크립트 코드에 의해 수정 될 때마다이 코드를 감지합니다.

    텍스트 상자의 내용이 사용자에 의해 변경 및 자바 스크립트 코드에 의해 수정 될 때마다이 코드를 감지합니다.

    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);

  15. 15.

    document.getElementById('txtrate' + rowCount).onchange = function () {            
       // your logic
};

    이 사람은 벌금을 작동하지만 좋은하지 않은 너무 클릭에 대한 이벤트를 트리거합니다. 내 시스템은 루프에 갔다. 동안

    $('#txtrate'+rowCount).bind('input', function() {
        //your logic
} );

    내 시나리오에서 완벽하게 작동합니다. 값이 변경 될 때에만 작동합니다. 대신 $ 중 하나가 너무 document.getElementById를 사용할 수 있습니다 서명

    16. from https://stackoverflow.com/questions/1481152/how-to-detect-a-textboxs-content-has-changed by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 DIV의 하단에 사용자가 스크롤 할 때 검출  (0) 2020.10.05
[JQUERY] ASP.NET 버튼 게시 jQuery를 UI와 대화  (0) 2020.10.05
[JQUERY] (즉시)을 사용하여 JQuery와 <input 타입 = "텍스트">에서의 모든 변경을 감지  (0) 2020.10.05
[JQUERY] 어떻게 바이너리 문자열에서 빌드 PDF 파일에 자바 스크립트를 사용하여 웹 서비스에서 반환  (0) 2020.10.05
[JQUERY] 자바 스크립트 객체의 필터 어레이  (0) 2020.10.05
,

티스토리툴바