dojo FilteringSelectイベントが 'X'がクリックされたときに発火する

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>