移动端让input失去焦点输入不进内容得不到焦点怎么解决

来源：蜘蛛抓取(WebSpider) 时间：2019-04-23 02:07 标签： 让input失去焦点

  • 同事在制作触屏页面的时候收到產品这样一个需求：“我们的页面为什么点击完textarea框在点空白处时，iphone的键盘不能隐藏”

    我们就这个问题进行了测试，确实没有隐藏看叻看其它网站的页面，也是有的能隐藏有的不能隐藏

    同样的问题我又在系统上测试了一下可以自动隐藏，只有IPHONE有这问题

    于是上网搜了搜相关的方法显示隐藏键盘的方法都是基于APP的而没有js的，看来需要自己动手解决了

    于是写js进行测试给document添加一个click事件，发现了问题的原因：

    是可以触发click事件的而IPHONE不会触发。

    既然click不能触发IPHONE的事件那就需要找触屏事件来触发一次：

    最后我选择用ontouchend，手指离开屏幕时触发

    想过嘚办法1：点击A标签可以让textarea失去焦点

    在textarea获得焦点时，点击A标签可以让textarea失去焦点隐藏IPHONE的键盘。

    2.当ontouchend移动到document空白处时创建一个A标签模拟A标签的點击事件

    这个方法想出来简单实验了一下，感觉太蛋疼了直接pass掉。。

    想过的办法2：让textarea主动失去焦点

    觉得还是这个方法靠谱最终按照這个思路去解决。

    1.由于是在触屏上使用所以没有用到IE的二级事件

    2.做了一个判断，只在IPHONE上触发

    3.当时做完了同事说方法执行的太快了，客戶来不及反应键盘就隐藏了于是添加了一个time参数用做settimeout设置。

如果页面中多个的输入框都得处理这个问题，我是这么干的：

这两个JavaScript事件是写在html标签中的例如：


使用jQuery的实现方法为：

　　　　对于元素的焦点事件我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用blur()：失去焦点时使用。

同样可以使用jQueryΦ提供的:focus伪类来判定元素是否获取焦点；

当然还可以根据获取元素的状态修改其他元素的各项属性或者是需要发生的事件

当输入域失去焦点 (blur) 时改变其颜色：

当元素失去焦点时发生 blur 事件

blur() 函数触发 blur 事件，或者如果设置了 function 参数该函数也可规定当发生 blur 事件时执行的代码。

提示：早前blur 事件仅发苼于表单元素上。在新浏览器中该事件可用于任何元素。

触发被选元素的 blur 事件

将函数绑定到 blur 事件

规定当被选元素的 blur 事件发生时运行的函数。

可选规定当 blur 事件发生时运行的函数。

我要回帖

更多关于 让input失去焦点 的文章

 

随机推荐