Начальная загрузка «x» кнопка очистки поиска не работает в ребре - PullRequest
Новая
       29

Начальная загрузка «x» кнопка очистки поиска не работает в ребре

0 голосов
/ 22 мая 2019

При вводе следующего элемента управления поиском появляется небольшая буква «х», когда я щелкаю по ней, мой фильтр очищается, и моя страница перерисовывается. Это отлично работает в 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/

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

Согласен с вами, это похоже на ошибку публикации в браузере 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>

результат как показано ниже:

enter image description here

0 голосов
/ 22 мая 2019

Это не имеет ничего общего с Vue.js или начальной загрузкой, просто Chrome отображает <input type="search">.

Если вы хотите одинаковое поведение во всех браузерах, используйте type="text" и создайте свой собственный "x"который очищает ввод при клике.

...