关于Edge浏览器无法对输入框中X图标执行后的解决方案

今天公司有个项目,需求是需要在input输入框中在IE和Edge两个不同的浏览器中点击自带的 x图标点击后触发js事件

网上找了很多方案,有的说是用绑定oninput,有的说是用propertychange事件的,但是这些我都试过了,IE下是可以的,但是Edge是不行的

后来试了一种方案,终于搞定,思路如下

1.既然是点 x后触发,可以在这个输入框上绑定mouseup事件来触发

2.需要注意的是如果在这个事件里直接获取的话,肯定不会获取input为空的数据,获取的是上一次输入的数据

3.获取当前input的value,看这个value是否为空,(P.S.这里可以取个巧,通过timeout来等一下,再获取就行了)

4.最后是你想要执行的js脚本或函数等

代码如下:

 1 $("#printerSearchInput").bind("mouseup", function (e) {
 2      var $input = $(this),
 3      oldValue = $input.val();
 4      if (oldValue == "") return;
 5 
 6      setTimeout(function () {
 7          var newValue = $input.val();
 8           if (newValue == "") {
 9                 getPrinterList();
10           }
11       }, 1);
12 })
View Code

具体说明一下:

#printerSearchInput可以替换为你们对应的文本框的ID

getPrinterList();可以替换为你们要执行的js代码段或js函数

特此记录一下,有需要的小伙伴可以试一下,顺便自己留存。

posted on 2019-10-17 14:03  迈克齐  阅读(668)  评论(0编辑  收藏  举报

导航