Açık simgeli IE10'da metin girişi temizlenirken olay tetiklendi

Chrome'da, kullanıcı temizle düğmesini tıkladığında arama girişlerinde "arama" olayı tetiklenir.

Internet Explorer 10'da javascript'te aynı olayı yakalamanın bir yolu var mı?

Sonunda bulduğum tek çözüm:

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

oninputOlay ile ateşler this.valueboş bir dizeye seti. Bu, benim için sorunu çözdü, çünkü arama kutusunu X ile veya geriye doğru boşluk bırakarak temizlesinler aynı eylemi yürütmek istiyorum. Bu yalnızca IE 10'da çalışır.

inputBunun yerine kullanın . Tüm tarayıcılarda aynı davranışla çalışır.

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

Neden olmasın

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

Bu sorunun yanıtlandığını biliyorum, ancak kabul edilen yanıt bizim durumumuzda işe yaramadı. IE10 ifadeyi tanımadı / ateşlemedi $input.trigger("cleared");.

Nihai çözümümüz, bu ifadeyi ENTER tuşundaki bir keydown olayıyla değiştirdi (kod 13). Gelecek nesil için, bizim durumumuzda işe yarayan buydu:

$('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);
});

Ayrıca, bu bağlamayı sayfadaki her girişe değil, yalnızca "arama" girişlerine uygulamak istedik. Doğal olarak, IE de bunu zorlaştırdı ... kodlamamıza rağmen <input type="search"...>, IE onları olarak yaptı type="text". Bu nedenle jQuery seçicisi type="text".

Şerefe!

Sadece inputolayı dinleyebiliriz . Bakınız başvuru detayları için. IE'de Sencha ExtJS'de temizle düğmesiyle ilgili bir sorunu şu şekilde düzelttim:

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

Kutudan çıkan bir çözüm, X'ten tamamen CSS ile kurtulmaktır:

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

Bunun aşağıdaki faydaları vardır:

1. Çok daha basit çözüm - tek hatta sığar
2. Tüm girişler için geçerlidir, böylece her giriş için bir işleyicinizin olması gerekmez
3. Mantıkta hata olan javascript'i kırma riski yok (daha az QA gerekli)
4. Tarayıcılar genelinde davranışı standartlaştırır - IE'nin Chrome'un X'e sahip olmadığı kromla aynı davranmasını sağlar

asp.net sunucu kontrolüm için

<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

MSDN onchange olayı - IE10'da test edildi.

... veya CSS ile gizlemek için:

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

Yukarıdaki kod benim durumumda çalışmıyordu ve bir satırı değiştirdim ve $input.typeahead('val', '');benim durumumda hangisinin çalıştığını tanıttım ..

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