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 source print ?

  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标签也能获取焦点，但是用代码模拟点击事件却不能触发键盘隐藏
        }
    });
}