当单击“X”时触发 dojo 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 按钮或因为他按下退格键删除了最后一个字符）。在这种情况下，您应该监控的不是 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>