Sự kiện thay đổi Javascript trên phần tử đầu vào kích hoạt khi chỉ mất tiêu điểm

Tôi có một phần tử đầu vào và tôi muốn tiếp tục kiểm tra độ dài của nội dung và bất cứ khi nào độ dài trở nên bằng một kích thước cụ thể, tôi muốn bật nút gửi, nhưng tôi đang gặp sự cố với sự kiện thay đổi của Javascript là sự kiện chỉ kích hoạt khi phần tử đầu vào nằm ngoài phạm vi chứ không phải khi nội dung thay đổi.

<input type="text" id="name" onchange="checkLength(this.value)" />

---- onchange không kích hoạt khi thay đổi nội dung của tên, nhưng chỉ kích hoạt khi tên mất tiêu điểm.

Tôi có thể làm gì để sự kiện này hoạt động trên cơ sở thay đổi nội dung không? hoặc một số sự kiện khác mà tôi có thể sử dụng cho việc này? Tôi đã tìm thấy một giải pháp khác bằng cách sử dụng chức năng onkeyup, nhưng điều đó không kích hoạt khi chúng tôi chọn một số nội dung từ trình hoàn thành tự động của trình duyệt.

Tôi muốn thứ gì đó có thể hoạt động khi nội dung của trường thay đổi dù bằng bàn phím hay bằng chuột ... có ý kiến ​​gì không?

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

Điều này sẽ bắt change, tổ hợp phím, paste, textInput, input(nếu có). Và không bắn nhiều hơn mức cần thiết.

http://jsfiddle.net/katspaugh/xqeDj/

Người giới thiệu:

textInput- loại sự kiện W3C DOM Level 3. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

Tác nhân người dùng phải gửi sự kiện này khi một hoặc nhiều ký tự đã được nhập. Các ký tự này có thể bắt nguồn từ nhiều nguồn khác nhau, ví dụ, các ký tự do một phím được nhấn hoặc nhả trên thiết bị bàn phím, từ quá trình xử lý của trình soạn thảo phương thức nhập hoặc do lệnh thoại. Trong trường hợp thao tác “dán” tạo ra một chuỗi ký tự đơn giản, tức là một đoạn văn bản không có bất kỳ thông tin cấu trúc hoặc kiểu nào, thì kiểu sự kiện này cũng phải được tạo.

input- một loại sự kiện HTML5 .

Kích hoạt các điều khiển khi người dùng thay đổi giá trị

Firefox, Chrome, IE9 và các trình duyệt hiện đại khác hỗ trợ nó.

Sự kiện này xảy ra ngay sau khi sửa đổi, không giống như sự kiện thay đổi, xảy ra khi phần tử mất tiêu điểm.

Như một phần mở rộng cho câu trả lời của katspaugh, đây là một cách để thực hiện điều đó cho nhiều phần tử bằng cách sử dụng một lớp css.

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

Tôi mất 30 phút để tìm thấy nó, nhưng tính năng này sẽ hoạt động vào tháng 6 năm 2019.

<input type="text" id="myInput" oninput="myFunction()">

và nếu bạn muốn thêm trình xử lý sự kiện theo chương trình trong js

inputElement.addEventListener("input", event => {})

Làm theo cách jQuery:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

Bạn có thể sử dụng onkeyup

<input id="name" onkeyup="checkLength(this.value)" />

Bạn sẽ phải sử dụng kết hợp onkeyupvà onclick(hoặc onmouseup) nếu bạn muốn nắm bắt mọi khả năng.

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

Đây là một giải pháp khác mà tôi phát triển cho cùng một vấn đề. Tuy nhiên, tôi sử dụng nhiều hộp nhập nên tôi giữ giá trị cũ làm thuộc tính do người dùng xác định của chính các phần tử: "data-value". Sử dụng jQuery rất dễ quản lý.

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

ở đây là, tôi đã sử dụng 5-6 hộp đầu vào có lớp 'filterBox', tôi chỉ chạy phương thức filterBy nếu data-value khác với giá trị của chính nó.