dojo 'X'를 클릭 할 때 FilteringSelect 이벤트 발생

Question

FilteringSelect에서 사용자가 X 버튼을 클릭하면 이벤트를 발생시킬 수 있습니까? X는 사용자 입력을 지우지 만 onChange 이벤트는 발생하지 않습니다. 감사!

Answer 1

Internet Explorer가 표시하는 X 단추를 입력 텍스트 상자로 참조한다고 가정합니다. 다른 브라우저에서는 이것을 표시하지 않습니다. FilteringSelect는 일반 입력란을 사용하므로이 문제에 대한 일반적인 대답을 참조하십시오. Event fired when clearing text input on IE10 with clear icon

여러 가지 방법이 있습니다. oninput 이벤트를 사용하면 표시된 값이 빈 문자열이 될 때를 확인할 수 있습니다 (사용자가 X 버튼을 클릭했거나 마지막 문자를 삭제하기 위해 backspace 키를 눌렀 기 때문). 이 경우 FilteringSelect 자체가 아니라 내부 텍스트 상자 (아래 예제 참조)를 모니터링해야합니다.

스타일이 X 버튼을 숨길 수있는 옵션도 있습니다 :

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

require([ 
 
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/on", "dojo/domReady!" 
 
], function(Memory, FilteringSelect, on){ 
 
    var stateStore = new Memory({ 
 
     data: [ 
 
      {name:"Alabama", id:"AL"}, 
 
      {name:"Alaska", id:"AK"}, 
 
      {name:"American Samoa", id:"AS"}, 
 
      {name:"Arizona", id:"AZ"}, 
 
      {name:"Arkansas", id:"AR"}, 
 
      {name:"Armed Forces Europe", id:"AE"}, 
 
      {name:"Armed Forces Pacific", id:"AP"}, 
 
      {name:"Armed Forces the Americas", id:"AA"}, 
 
      {name:"California", id:"CA"}, 
 
      {name:"Colorado", id:"CO"}, 
 
      {name:"Connecticut", id:"CT"}, 
 
      {name:"Delaware", id:"DE"} 
 
     ] 
 
    }); 
 

 
    var filteringSelect = new FilteringSelect({ 
 
     id: "stateSelect", 
 
     name: "state", 
 
     value: "CA", 
 
     store: stateStore, 
 
     searchAttr: "name" 
 
    }, "stateSelect"); 
 
    filteringSelect.startup(); 
 
    
 
    on(filteringSelect.textbox, "input", function(event) { 
 
     if (filteringSelect.textbox.value == "") 
 
     { 
 
     window.alert("Cleared"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css" rel="stylesheet"/> 
 
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet"/> 
 
<div class="claro"> 
 
<input id="stateSelect"> 
 
</div>

가