HTML：

Question

当我键入以下搜索控件时，出现一个小“ 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/的错误

Answer 1

这与Vue.js或引导程序无关，这只是Chrome渲染<input type="search">的方式。

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

Answer 2

与您同意，这似乎是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>

结果如下：

引导程序“ x”搜索清除按钮在边缘不起作用

HTML：

代码：

更新：

2 个答案: