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

Question

Tôi có yếu 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 bằng với kích thước cụ thể, tôi muốn bật nút gửi nhưng Tôi đang phải đối mặt với một vấn đề với sự kiện onchange của javascript như sự kiện cháy chỉ khi các yếu tố đầu vào đi ra khỏi phạm vi và không khi các nội dung thay đổi.

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

---- onchange không bắn về việc thay đổi nội dung của tên, nhưng chỉ cháy khi tên đi ra khỏi tập trung.

Có điều gì tôi có thể làm để làm cho sự kiện này hoạt động trên thay đổi nội dung không? hoặc sự kiện nào đó tôi có thể sử dụng cho điều này? Tôi đã tìm thấy giải pháp thay thế 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 tất 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 hoặc chuột ... bất kỳ ý tưởng nào?

Answer 1

(function() { 
    var oldVal; 

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

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

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

---

Tài liệu tham khảo:

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

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

input - an HTML5 loại sự kiện.

Bị sa thải tại 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.

Answer 2

Do it the jQuery way:

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


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

Answer 3

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

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

Answer 4

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

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

Answer 5

Đâ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 liệu vì vậy tôi giữ giá trị cũ là 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 nó 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 làm filterBy phương pháp chạy chỉ khi dữ liệu có giá trị khác với giá trị riêng của nó.

Answer 6

Là một phần mở rộng cho câu trả lời của katspaugh, đây là cách để làm điều đó cho nhiều phần tử 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()); 
     } 
    });