js控制iphone端的input/textarea元素失去焦点时隐藏键盘

原文链接

• 问题的原由

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

  

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

  IPHONE系统在点击document时textarea为什么没有失去焦点？

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

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

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

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

  也就是说在IPHONE下你点击空白的document处textarea并不能失去焦点。

  使用触屏事件

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

  ontouchstart
  ontouchmove
  ontouchend
  ontouchcancel

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

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

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

  实现的思路就是：

  1.textarea在获得焦点时

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

  3.textarea失去焦点，隐藏IPHONE的键盘

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

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

  1.textarea获得焦点时

  2.给document添加一个ontouchend事件，判断当前点击的元素是不是textarea本身 如果不是 textarea会失去焦点

  3.document移除ontouchend事件

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

  最终方法

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

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

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

  view sourceprint?

  01.//判断是否为苹果

  02.var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;

  03. 

  04.// 元素失去焦点隐藏iphone的软键盘

  05.function objBlur(id,time){

  06.if(typeof id != 'string') throw new Error('objBlur()参数错误');

  07.var obj = document.getElementById(id),

  08.time = time || 300,

  09.docTouchend = function(event){

  10.if(event.target!= obj){

  11.setTimeout(function(){

  12.obj.blur();

  13.document.removeEventListener('touchend', docTouchend,false);

  14.},time);

  15.}

  16.};

  17.if(obj){

  18.obj.addEventListener('focus', function(){

  19.document.addEventListener('touchend', docTouchend,false);

  20.},false);

  21.}else{

  22.throw new Error('objBlur()没有找到元素');

  23.}

  24.}

  25. 

  26.if(isIPHONE){

  27.var input = new objBlur('input');

  28.input=null;

  29.}

// ========== 我的添加 ==============

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

function fixedInputBlur () {
    var beforeIpt=null;
    $("input").on("focus", function (e) {
        beforeIpt=this;
    });
    $(document).on("tap", function (e) {
        if(e.target.nodeName.toLowerCase()!="input") {
            if(beforeIpt) {
                beforeIpt.blur();
                beforeIpt=null;
            }
            // a标签也能获取焦点，但是用代码模拟点击事件却不能触发键盘隐藏
        }
    });
}