Bootstrap“X”搜索清除按钮在edge中不起作用

Question

当我键入下面的搜索控件时，会出现一个小“X”，当我单击它时，我的过滤器被清除，我的页面重新呈现。这在铬上很好用。但是，它在Edge 17.17134中不起作用，单击“X”不起作用。我怎么才能让它起作用？

  <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);
    });
  }
}

Answer 1

这与vue.js或bootstrap无关，这只是Chrome如何呈现。

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