지우기 아이콘으로 IE10에서 텍스트 입력을 지울 때 발생하는 이벤트

지우기 아이콘으로 IE10에서 텍스트 입력을 지울 때 발생하는 이벤트

---

크롬에서 사용자가 지우기 버튼을 클릭하면 검색 입력에서 "검색"이벤트가 발생합니다.

Internet Explorer 10 JavaScript에서 동일한 이벤트를 운영하는 방법이 있습니까?

---

내가 가능한 해결책 :

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

---

oninput이벤트가 함께 발생 this.value빈 곳으로 설정합니다. X 또는 백 스페이스로 검색 상자를 지우 든 동일한 작업을 실행하고 싶었 기 때문에이 나를 ​​위해 문제를 해결했습니다. 이것은 IE 10에서만 작동합니다.

---

input대신 사용하십시오 . 모든 브라우저에서 동일한 동작으로 작동합니다.

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

---

왜 안돼

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

---

나는이 질문에 대한 답변을 대답지만 받아 들여진 답변이 우리 상황에서 작동하지 않습니다. IE10은 $input.trigger("cleared");방송을 인식 / 실행하지 않습니다 .

최종 솔루션은 해당 문을 ENTER 키 (코드 13)의 keydown 이벤트로 대체했습니다. 후손에게는 그것이 우리의 경우에 효과가 떨어져 있습니다입니다.

$('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".

건배!

---

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

---

즉시 사용 가능한 솔루션은 CSS로 X를 완전히 제거하는 것입니다.

::-ms-clear { display: none; } /* see https://stackoverflow.com/questions/14007655 */

다음과 같은 이점이 있습니다.

1. 훨씬 단순한 솔루션-한 줄에 적합
2. 모든 입력에 필요한 내용이 입력되어 있습니다.
3. 로직 버그로 자바 펼쳐를 깨뜨릴 위험 없음 (QA가 덜 필요함)
4. 브라우저 간 동작 표준화-크롬에 X가 점에서 IE가 크롬과 동일하게 동작합니다.

---

내 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에서 테스트되었습니다.

... 또는 CSS로 인수 :

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

---

위의 코드는 제 경우에는 작동하지 사고 고 한 줄을 변경 $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);
});

참고 URL : https://stackoverflow.com/questions/14498396/event-fired-when-clearing-text-input-on-ie10-with-clear-icon