Cách phát hiện nội dung của hộp văn bản đã thay đổi

Tôi muốn phát hiện bất cứ khi nào nội dung của hộp văn bản đã thay đổi. Tôi có thể sử dụng phương thức gõ phím, nhưng điều đó cũng sẽ phát hiện các tổ hợp phím không tạo ra các chữ cái, như các phím mũi tên. Tôi đã nghĩ đến hai phương pháp để làm điều này bằng cách sử dụng sự kiện keyup:

1. Kiểm tra một cách rõ ràng nếu mã ascii của phím được nhấn là một chữ cái \ backspace \ xóa
2. Sử dụng các bao đóng để ghi nhớ văn bản trong hộp văn bản trước hành trình phím và kiểm tra xem điều này đã thay đổi.

Cả hai trông hơi cồng kềnh.

Bắt đầu quan sát sự kiện 'đầu vào' thay vì 'thay đổi'.

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

... đó là tốt đẹp và sạch sẽ, nhưng có thể được mở rộng hơn nữa để:

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

Sử dụng sự kiện onchange trong HTML / JavaScript chuẩn.

Trong jQuery đó là sự kiện thay đổi () . Ví dụ:

$('element').change(function() { // do something } );

BIÊN TẬP

Sau khi đọc một số ý kiến, những gì về:

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

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

Sự kiện 'thay đổi' không hoạt động chính xác, nhưng 'đầu vào' là hoàn hảo.

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

Còn cái này thì sao:

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

Điều này hoạt động trong IE8 / IE9, FF, Chrome

Sử dụng các bao đóng để ghi nhớ văn bản trong hộp kiểm trước hành trình phím và kiểm tra xem điều này đã thay đổi.

Vâng. Bạn không nhất thiết phải sử dụng các bao đóng, nhưng bạn sẽ cần nhớ giá trị cũ và so sánh nó với giá trị mới.

Tuy nhiên! Điều này vẫn sẽ không nắm bắt được mọi thay đổi, bởi vì có một cách chỉnh sửa nội dung hộp văn bản không liên quan đến bất kỳ phím nhấn nào. Ví dụ: chọn một phạm vi văn bản sau đó nhấp chuột phải. Hoặc kéo nó. Hoặc thả văn bản từ một ứng dụng khác vào hộp văn bản. Hoặc thay đổi một từ thông qua kiểm tra chính tả của trình duyệt. Hoặc là...

Vì vậy, nếu bạn phải phát hiện mọi thay đổi, bạn phải bỏ phiếu cho nó. Bạn có thể window.setIntervalkiểm tra trường so với giá trị trước đó mỗi giây. Bạn cũng có thể dây onkeyupvào chức năng tương tự để thay đổi điều đó được gây ra bởi keypresses được phản ánh nhanh hơn.

Cồng kềnh? Đúng. Nhưng đó là hoặc chỉ làm theo cách trao đổi HTML thông thường và không thử cập nhật tức thì.

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

Bạn có thể sử dụng sự kiện 'đầu vào' để phát hiện thay đổi nội dung trong hộp văn bản. Đừng sử dụng 'live' để liên kết sự kiện vì nó không được dùng trong Jquery-1.7, vì vậy hãy sử dụng 'on'.

Tôi giả sử rằng bạn đang muốn làm một cái gì đó tương tác khi hộp văn bản thay đổi (tức là lấy một số dữ liệu qua ajax). Tôi đã tìm kiếm chức năng tương tự. Tôi biết sử dụng toàn cầu không phải là giải pháp mạnh mẽ hay thanh lịch nhất, nhưng đó là những gì tôi đã làm. Đây là một ví dụ:

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

Một điều quan trọng cần lưu ý ở đây là tôi đang sử dụng setTimeout chứ không phải setInterval vì tôi không muốn gửi nhiều yêu cầu cùng một lúc. Điều này đảm bảo rằng bộ hẹn giờ "dừng" khi biểu mẫu được gửi và "bắt đầu" khi yêu cầu hoàn tất. Tôi làm điều này bằng cách gọi checkSearchChanged khi cuộc gọi ajax của tôi hoàn tất. Rõ ràng bạn có thể mở rộng điều này để kiểm tra độ dài tối thiểu, v.v.

Trong trường hợp của tôi, tôi đang sử dụng ASP.Net MVC để bạn có thể xem cách kết hợp điều này với MVC Ajax cũng như trong bài sau:

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

Tôi khuyên bạn nên xem qua tiện ích tự động hoàn thành giao diện người dùng jQuery. Họ đã xử lý hầu hết các trường hợp ở đó vì cơ sở mã của họ trưởng thành hơn hầu hết các trường hợp ngoài kia.

Dưới đây là một liên kết đến một trang demo để bạn có thể xác minh nó hoạt động. http://jqueryui.com/demos/autocomplete/#default

Bạn sẽ nhận được nhiều lợi ích nhất từ ​​việc đọc nguồn và xem cách họ giải quyết nó. Bạn có thể tìm thấy nó ở đây: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Về cơ bản họ làm tất cả, họ ràng buộc input, keydown, keyup, keypress, focus and blur. Sau đó, họ có xử lý đặc biệt cho tất cả các loại khóa như page up, page down, up arrow key and down arrow key. Một bộ đếm thời gian được sử dụng trước khi nhận được nội dung của hộp văn bản. Khi người dùng nhập một khóa không tương ứng với một lệnh (phím lên, phím xuống và vv), có một bộ đếm thời gian khám phá nội dung sau khoảng 300 mili giây. Có vẻ như trong mã này:

// 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 );
},

Lý do để sử dụng bộ đếm thời gian là để UI có cơ hội được cập nhật. Khi Javascript đang chạy, UI không thể được cập nhật, do đó, gọi chức năng trì hoãn. Điều này hoạt động tốt cho các tình huống khác như giữ tập trung vào hộp văn bản (được sử dụng bởi mã đó).

Vì vậy, bạn có thể sử dụng tiện ích con hoặc sao chép mã vào tiện ích của riêng mình nếu bạn không sử dụng Giao diện người dùng jQuery (hoặc trong trường hợp của tôi là phát triển tiện ích tùy chỉnh).

Tôi muốn hỏi tại sao bạn đang cố gắng phát hiện khi nội dung của hộp văn bản thay đổi trong thời gian thực ?

Một cách khác là đặt bộ hẹn giờ (thông qua setIntval?) Và so sánh giá trị đã lưu cuối cùng với giá trị hiện tại và sau đó đặt lại bộ hẹn giờ. Điều này sẽ đảm bảo bắt được BẤT K change thay đổi nào, cho dù do phím, chuột, một số thiết bị đầu vào khác mà bạn không xem xét hoặc thậm chí JavaScript thay đổi giá trị (một khả năng khác không ai đề cập) từ một phần khác của ứng dụng.

Bạn có cân nhắc sử dụng sự kiện thay đổi không?

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

Sử dụng textchangesự kiện thông qua shim jQuery tùy chỉnh để inputtương thích trình duyệt chéo . http://benalpert.com/2013/06/18/a-gần-perinf-oninput-shim-for-ie-8-and-9.html (github mới nhất gần đây nhất: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Điều này xử lý tất cả các thẻ đầu vào bao gồm <textarea>content</textarea>, không phải lúc nào cũng hoạt động với change keyupv.v. (!) Chỉ jQuery on("input propertychange")xử lý <textarea>các thẻ một cách nhất quán và ở trên là một shim cho tất cả các trình duyệt không hiểu inputsự kiện.

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

Kiểm tra thùng rác

Điều này cũng xử lý dán, xóa và không trùng lặp nỗ lực trên keyup.

Nếu không sử dụng shim, hãy sử dụng on("input propertychange")các sự kiện jQuery .

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

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

Có một ví dụ hoạt động hoàn chỉnh ở đây .

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

Một cái gì đó như thế này sẽ hoạt động, chủ yếu là vì focusvà focusoutsẽ kết thúc với hai giá trị riêng biệt. Tôi đang sử dụng dataở đây vì nó lưu trữ các giá trị trong phần tử nhưng không chạm vào DOM. Nó cũng là một cách dễ dàng để lưu trữ giá trị được kết nối với phần tử của nó. Bạn có thể dễ dàng sử dụng một biến có phạm vi cao hơn.

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

Mã này phát hiện bất cứ khi nào nội dung của hộp văn bản được người dùng thay đổi và sửa đổi bằng mã 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);