Sự kiện được kích hoạt khi xóa dữ liệu nhập văn bản trên IE10 với biểu tượng rõ ràng

Trên chrome, sự kiện "tìm kiếm" được kích hoạt trên đầu vào tìm kiếm khi người dùng nhấp vào nút xóa.

Có cách nào để nắm bắt cùng một sự kiện trong javascript trên Internet Explorer 10 không?

Giải pháp duy nhất cuối cùng tôi đã tìm thấy:

// There are 2 events fired on input element when clicking on the clear button:
// mousedown and mouseup.
$("input").bind("mouseup", function(e){
  var $input = $(this),
      oldValue = $input.val();

  if (oldValue == "") return;

  // When this event is fired after clicking on the clear button
  // the value is not cleared yet. We have to wait for it.
  setTimeout(function(){
    var newValue = $input.val();

    if (newValue == ""){
      // Gotcha
      $input.trigger("cleared");
    }
  }, 1);
});

Sự oninputkiện kích hoạt khi this.valueđược đặt thành một chuỗi trống. Điều này đã giải quyết được vấn đề cho tôi, vì tôi muốn thực hiện cùng một hành động cho dù họ xóa hộp tìm kiếm bằng X hay bằng khoảng cách lùi. Điều này chỉ hoạt động trong IE 10.

Sử dụng inputthay thế. Nó hoạt động với cùng một hành vi trong tất cả các trình duyệt.

$(some-input).on("input", function() { 
    // update panel
});

Tại sao không

$("input").bind('input propertychange', function() {
    if (this.value == ""){
      $input.trigger("cleared");
    }
});

Tôi nhận thấy câu hỏi này đã được trả lời, nhưng câu trả lời được chấp nhận không hoạt động trong tình huống của chúng tôi. IE10 không nhận dạng / kích hoạt $input.trigger("cleared");câu lệnh.

Giải pháp cuối cùng của chúng tôi đã thay thế câu lệnh đó bằng sự kiện keydown trên phím ENTER (mã 13). Đối với hậu thế, đây là những gì đã hoạt động trong trường hợp của chúng tôi:

$('input[type="text"]').bind("mouseup", function(event) {
    var $input = $(this);
    var oldValue = $input.val();
    if (oldValue == "") {
        return;
    }
    setTimeout(function() {
        var newValue = $input.val();
        if (newValue == "") {
            var enterEvent = $.Event("keydown");
            enterEvent.which = 13;
            $input.trigger(enterEvent);
        }
    }, 1);
});

Ngoài ra, chúng tôi chỉ muốn áp dụng ràng buộc này cho các đầu vào "tìm kiếm", không phải mọi đầu vào trên trang. Đương nhiên, IE cũng làm điều này khó khăn ... mặc dù chúng tôi đã viết mã <input type="search"...>, IE đã hiển thị chúng như vậy type="text". Đó là lý do tại sao bộ chọn jQuery tham chiếu đến type="text".

Chúc mừng!

Chúng ta chỉ có thể lắng nghe inputsự kiện. Vui lòng xem tham khảo để biết chi tiết. Đây là cách tôi khắc phục sự cố với nút xóa trong Sencha ExtJS trên IE:

Ext.define('Override.Ext.form.field.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    onRender: function () {
        this.callParent();

        var me = this;
        this.inputEl.dom.addEventListener('input', function () {
            // do things here
        });
    }
});

Một giải pháp hữu ích là chỉ cần loại bỏ hoàn toàn X bằng CSS:

::-ms-clear { display: none; } /* see /programming/14007655 */

Điều này có những lợi ích sau:

1. Giải pháp đơn giản hơn nhiều - vừa vặn trên một dòng
2. Áp dụng cho tất cả các đầu vào, do đó bạn không cần phải có trình xử lý cho mỗi đầu vào
3. Không có nguy cơ phá vỡ javascript với lỗi logic (ít QA cần thiết hơn)
4. Chuẩn hóa hành vi trên các trình duyệt - làm cho IE hoạt động giống như chrome ở chỗ chrome không có X

để kiểm soát máy chủ asp.net của tôi

<asp:TextBox ID="tbSearchName" runat="server" oninput="jsfun_tbSearchName_onchange();"></asp:TextBox>

js

function jsfun_tbSearchName_onchange() {
    if (objTbNameSearch.value.trim() == '')
            objBTSubmitSearch.setAttribute('disabled', true);
        else
            objBTSubmitSearch.removeAttribute('disabled');
        return false;
}

ref

Sự kiện trao đổi MSDN - được thử nghiệm trong IE10.

... hoặc ẩn bằng CSS:

input[type=text]::-ms-clear { display: none; }

Đoạn mã trên không hoạt động trong trường hợp của tôi và tôi đã thay đổi một dòng và giới thiệu dòng $input.typeahead('val', '');nào hoạt động trong trường hợp của tôi ..

// There are 2 events fired on input element when clicking on the clear button:// mousedown and mouseup.
$("input").on('mouseup', function(e){
    var $input = $(this),
    oldValue = $input.val();
    if (oldValue === ''){
        return;
    }
    // When this event is fired after clicking on the clear button // the value is not cleared yet. We have to wait for it.
    setTimeout(function(){
        var newValue = $input.val();
        if (newValue === ''){
            $input.typeahead('val', '');
            e.preventDefault();
        }
    }, 1);
});