【问题标题】：Bootstrap "x" search clear button does not work in edgeBootstrap“x”搜索清除按钮在边缘不起作用
【发布时间】：2019-05-22 12:04:02
【问题描述】：

当我输入以下搜索控件时，会出现一个小“x”，当我单击它时，我的过滤器被清除并且我的页面重新呈现。这在 chrome 中运行良好。但是，它在 Edge 17.17134 中不起作用，单击“x”没有任何作用。我怎样才能让它发挥作用？

HTML：

  <div class="input-group search">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="fa fa-search"></i>
      </span>
    </div>
    <input type='search'
           class="form-control"
           placeholder="Type to filter..."
           v-model="filter"
           @input="performFilter" />
  </div>

代码：

data: function () {
  return {
    filter: ''
  };
},
methods: {
  performFilter() {
    var filter = this.filter.toLowerCase();
    this.objs.forEach(function (obj) {
      obj.visible = obj.name.toLowerCase().includes(filter);
    });
  }
}

更新：

似乎它是 Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17584515/ 中的一个错误

【问题讨论】：

标签： javascript twitter-bootstrap vue.js search microsoft-edge

【解决方案1】：

同意你的观点，这似乎是 Edge 浏览器中的发布错误。

作为一种解决方法，我建议您可以附加文本框的 mouseup 事件，然后使用此事件来捕获清除操作。请参考以下代码：

<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="findindexpolyfill.js"></script>
</head>
<body>
    <div id="app">
        <input type='text' id="txtfilter"
               placeholder="Type to filter..."
               v-model="filter"
               @input="performFilter" @mouseup='mouseupEvent' />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: false,
                filter:""
            },
            methods: {
                performFilter() {
                    var filter = this.filter.toLowerCase();
                    console.log("input event!" + filter +"<br/>");
                    //this.objs.forEach(function (obj) {
                    //    obj.visible = obj.name.toLowerCase().includes(filter);
                    //});
                },
                mouseupEvent(e) {
                    var oldvalue = $("#txtfilter").val();

                    if (oldvalue == "") {
                        console.log('focus Input!');
                        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 = $("#txtfilter").val();
                        if (newValue == "") {
                            //
                            console.log('Clear Input!');
                        }
                    }, 1);
                }
            }
        })
    </script>
</body>

结果如下：

【讨论】：

谢谢！基于你的——codepen.io/JoePC/pen/RwLqdQzvar ctx = this; setTimeout(function () { if (!$("#txtfilter").val()) { ctx.filter = ""; } }, 1);

【解决方案2】：

这与 Vue.js 或 bootstrap 无关，只是 Chrome 呈现 <input type="search"> 的方式。

如果您希望在所有浏览器上都具有相同的行为，请使用 type="text" 并创建您自己的“x”，它会在点击时清除输入。

【讨论】：

即使设置为“文本”边缘仍然呈现一个“x”，单击时不会触发更改事件。要么它不应该呈现“x”，要么在清除该框时触发更改！
用@change代替@input怎么样？
@Change 仅在您离开时触发