지우기 아이콘으로 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 /programming/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);
});