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

}

});

}