模拟IOS清空按钮实现

w1017894741

功能如题。使用方法都在附件当中.

其实在实现的过程中我遇到了一个问题没有解决，所以采用了另外一种绕行的方案实现的，代码量多了不少。


   描述： 清空按钮是当input获得焦点的时候+输入框中有内容的时候才会显示出来，这是两个必要+逻辑条件，换句还说，当input没有焦点的时候是隐藏的状态。
   实现：
             通常的实现思路是通过绑定focus和blur事件实现：
             1 input聚焦的时候显示“清空”按钮，这时可以点击（问题出来了，下面说）
             2 input失去焦点的时候隐藏按钮
    问题：
             1 在手机中运行时和pc端浏览器里模拟运行不同的是,手机上输入是会弹出键盘的,聚焦时显示键盘,失焦时隐藏键盘
             2 当键盘弹起input聚焦的状态下点击"清空"按钮时,分解一下是     "input失去焦点"--->>>"点击按钮"     ,按钮绑定的click事件和事件处理函数用来清空当前的input
             3 实际上只执行了"blur"的事件处理函数,按钮的click事件处理函数并没有执行




由于事件这方面我的火候还不到家,所以采用阻止默认事件和阻止冒泡之类的方法我尝试了几次,没有清晰的思路去实现.
有兴趣的大神们希望可以提供一些解决方案,发在这里或者发我QQ都行. 模拟IOS清空按钮.zip (3.9 KB, 下载次数: 40)

2016-12-19 16:12 上传

点击文件名下载附件
QQ:   1017894741

w1017894741

对了 这些输入框必须得改成原生的input标签.  也可以使用input组件的样式