IE10 पर स्पष्ट आइकन के साथ पाठ इनपुट को साफ़ करते समय घटना को निकाल दिया गया

Question

क्रोम पर, "खोज" ईवेंट को खोज इनपुट पर निकाल दिया जाता है जब उपयोगकर्ता स्पष्ट बटन पर क्लिक करता है।

क्या इंटरनेट एक्सप्लोरर 10 पर जावास्क्रिप्ट में उसी घटना को पकड़ने का एक तरीका है?

Comments

संभावित डुप्लिकेट: stackoverflow.com/questions/2492722/…

— wakooka

नहीं, यह सब IE10 के बारे में है। वेबकिट पर, मुझे पता है कि इसे कैसे संभालना है।

— ग़ुस्से २४'१३ को १०:०

फ़ील्ड साफ़ करते समय IE10 में कोई घटना नहीं हुई है।

— वाकुआ

हम्म, अभी भी एक कोशिश के काबिल हो सकता है, लेकिन ऐसा लगता है जैसे IE में एक छोटी गाड़ी 'इनपुट' घटना भी है: help.dottoro.com/ljhxklln.php (केवल जब पाठ जोड़ा जाता है, तो निकाल दिया जाता है न कि निकाल दिया जाता है!)

— natevad

@ghusse 'इनपुट' इवेंट निकाल दिया जाता है।

— kzh

Answer 1

एकमात्र समाधान जो मैंने अंततः पाया:

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

Comments

धन्यवाद घुसे! यदि कोई किसी अन्य समाधान के साथ (सेटटाइमआउट के बिना) आता है, तो मुझे बताएं।

— उन्होंने Nric

यह ASP.NET / jQuery / IE11 के लिए भी काम करता है। $ ("इनपुट") के बजाय। बाइंड ("माउसअप", फ़ंक्शन (ई) {आपको $ ('# <% = MyTextBox.ClientID%>') का उपयोग करने की आवश्यकता है। माउसअप (फ़ंक्शन) () {

— जो

नीचे ल्यूसेंट द्वारा समाधान IE11 में मेरे लिए काम करता है। उसका समाधान oninputइसके बजाय घटना का उपयोग करना है । जब आप X आइकन दबाते हैं तो inputईवेंट आग हो जाता है।

— Iheartcsharp

अगर बयान नहीं होना चाहिए if (oldValue === "")?

— डायलन सेज़ेंस्की

input-Event काम के साथ Lucent द्वारा समाधान करते समय , यह समाधान इस बात में श्रेष्ठ है कि यह केवल तभी फायर करता है जब तत्व को साफ किया जाता है, जबकि Lucent भी आग लगाता है जब कर्सर तत्व में प्रवेश करता है, तत्व को छोड़ देता है, और यह भी कि जब डेटा दर्ज किया गया है।

— स्फीनिक

Answer 2

oninputघटना के साथ आग this.valueरिक्त स्ट्रिंग पर सेट। इससे मेरे लिए समस्या हल हो गई, क्योंकि मैं उसी कार्रवाई को निष्पादित करना चाहता हूं चाहे वे एक्स के साथ खोज बॉक्स को साफ करें या बैकस्पेसिंग द्वारा। यह IE 10 में ही काम करता है।

Comments

यह मेरे लिए IE10 में भी काम करता है, यह मत सोचिए कि IE पर पहले के संस्करणों में एक स्पष्ट फ़ील्ड बटन है, इसलिए केवल IE10 के लिए काम करने की आवश्यकता है

— andyface

IE11 में काम करता है!

— एफ्रोमोगली

यह क्रोम और फ़ायरफ़ॉक्स में भी काम करता है और जब उपयोगकर्ता सही माउस क्लिक करता है और मूल्य में कटौती करता है तो भी आग लग जाती है। उपयोग इस हुक करने के लिए: inputEl.addEventListener('input', function(){ /* DoSomething */ })।

— डेरेक

Answer 3

inputइसके बजाय उपयोग करें । यह सभी ब्राउज़रों के तहत समान व्यवहार के साथ काम करता है।

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

Comments

दस्तावेज़ मोड 5 में IE 11 में काम नहीं करता है, लापता ब्रैकेट को बंद करना, btw।

— बर्नहार्ड डब्लर

Answer 4

क्यों नहीं

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

Comments

क्या होगा यदि उपयोगकर्ता ने बस अपने कीबोर्ड से कुछ पाठ हटा दिया है?

— घुस्से

@ghusse आप उस बटन का उपयोग किए बिना एक क्लिक और ड्रैग के साथ एक टेक्स्ट फ़ील्ड भी साफ़ कर सकते हैं। तो स्वीकार किया गया एईआर भी विफल हो जाएगा। मुझे लगता है कि ओपी ने सवाल पूछा क्योंकि जब कोई उपयोगकर्ता स्पष्ट फ़ील्ड बटन दबाता है, तो वह एक घटना के साथ अधिसूचित होना चाहता है।

— Ertug

एक क्लिक और एक ड्रैग के साथ, मैं यह नहीं देख सकता कि आपके कीबोर्ड के डेल बटन को छोड़कर एक टेक्स्ट फ़ील्ड को कैसे साफ़ किया जाए।

— घुस्से

@ghusse कृपया सभी पाठ का चयन करें और अन्य पाठ बॉक्स में खींचने का प्रयास करें। यदि आप Alt कुंजी दबाए हुए आपके लिए काम नहीं कर रहे हैं।

— Ertug

ऐसा लगता है कि यह दिन के अंत में बेहतर जवाब है, हालांकि सवाल के लिए शायद 100% विशिष्ट नहीं है। सभी प्रकार के मामलों को कवर करने के लिए लगता है, यहां तक ​​कि ऑटो क्रोम से भी पूरा होता है।

— एआर

Answer 5

मुझे लगता है कि इस सवाल का जवाब दिया गया है, लेकिन स्वीकृत जवाब हमारी स्थिति में काम नहीं आया। IE10 ने $input.trigger("cleared");कथन को मान्यता नहीं दी है ।

हमारे अंतिम समाधान ने उस कथन को ENTER कुंजी (कोड 13) पर कीडाउन इवेंट के साथ बदल दिया। पोस्टरिटी के लिए, हमारे मामले में यह काम करता है:

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

इसके अलावा, हम इस बंधन को केवल "खोज" इनपुट पर लागू करना चाहते थे, न कि पृष्ठ पर प्रत्येक इनपुट। स्वाभाविक रूप से, IE ने इसे भी मुश्किल बना दिया ... हालांकि हमने कोड किया था <input type="search"...>, IE ने उन्हें रूप में प्रस्तुत किया type="text"। यही कारण है कि jQuery चयनकर्ता संदर्भ type="text"।

चीयर्स!

Comments

शानदार, मेरे लिए काम किया, हालांकि मैंने इसके बजाय कीप को ट्रिगर किया (मेरा कोड 2 वर्णों के लिए दिखता है और स्वचालित रूप से कीप पर खोज करता है)

— पंकोलॉजिस्ट

Answer 6

हम सिर्फ inputघटना सुन सकते हैं । कृपया विवरण के लिए संदर्भ देखें। यह है कि मैं IE पर Sencha ExtJS में स्पष्ट बटन के साथ एक मुद्दा कैसे तय किया:

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

Comments

यह उत्तर MS Edge के लिए काम करता है, खोज क्षेत्र को खाली करने के लिए "x" पर क्लिक करने पर "इनपुट" घटना को निकाल दिया जाता है।

— 3

मैं वेनिला js और MS Edge का उपयोग कर रहा हूं जब X पर क्लिक करने पर इनपुट इवेंट में आग नहीं लगती। मुझे लगता है कि किसी भी तरह से इस इवेंट को देखने की कोशिश करना एक बुरा विचार था। सामान्य रूप जैसे बटन का बेहतर उपयोग करें।

— रिवेनफॉल

Answer 7

बॉक्स समाधान के बाहर सिर्फ X को पूरी तरह से CSS से मुक्त करना है:

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

इसके निम्नलिखित लाभ हैं:

1. बहुत सरल समाधान - एक पंक्ति पर फिट बैठता है
2. सभी इनपुटों पर लागू होता है ताकि आपके पास प्रत्येक इनपुट के लिए एक हैंडलर न हो
3. तर्क में बग के साथ जावास्क्रिप्ट को तोड़ने का कोई जोखिम नहीं (कम क्यूए आवश्यक)
4. ब्राउज़रों के व्यवहार को मानकीकृत करता है - IE उसी तरह का व्यवहार करता है जैसे क्रोम में एक्स नहीं होता है

Answer 8

मेरे asp.net सर्वर नियंत्रण के लिए

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

संदर्भ

MSDN onchange घटना - IE10 में परीक्षण किया गया।

... या सीएसएस के साथ छिपाने के लिए:

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

Answer 9

उपरोक्त कोड मेरे मामले में काम नहीं कर रहा था और मैंने एक पंक्ति को बदल दिया है और पेश किया $input.typeahead('val', '');जो मेरे मामले में काम करता है।

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