移动端JavaScript拉起软键盘

先上图来镇楼

大家都知道在移动端，软键盘给我们带来了很多的坑。坑了这次还有下次，真是让人刻骨铭心。这次就来扒一扒JavaScript拉起键盘的坑。

一、文本输入

文本输入html元素

1、input标签，且type类型为text，number，search，tel，password，email，url等等。如果在未实现的设备上，会自动降级为text类型，缺省值为text。
2、textarea标签
3、设置contenteditable=”true”的标签

二、软键盘的事件

软件盘有哪些事件呢，常见的就是弹起和收起了

1) 键盘弹起

网传以下结论
a. iOS6之前，当控件获得focus的时候，如果不是用户触发的事件，键盘是不会弹起的。需要用户手点击，也就是说单纯依靠JavaScript是无法做到的。
b. 在iOS6之后，设置了一个属性(autofocus)可以做到。
c. 在Android上，只要不是用户触发的事件都无法触发。

但是经过验证，autofocus在ios上也无效，如果不是用户触发的事件，键盘是不会弹起的。

2) 键盘的收起
可以通过js的blur的方式来实现。

用户触发，要不是直接点击文本输入元素，要不就是间接点击。 间接点击是个什么意思呢：

<label for="input1">点击我呀</label>   
<input type="search" id="input1" name="">

以上代码，你点击label的时候，input就会获得焦点，这样就能顺利的拉起键盘。 但有个前提条件，input不能被设置为display:none;或者visibility:hidden;，opacity: 0;倒是可以。可以看这里体验下： demo1

但现在的需求是，受限于html结构，怎样间接的拉起键盘，且input不可见。

实现

搜索组件与下面的头部banner组件是同级的，点击搜索icon隐藏头部banner，然后显示搜索组件。

点击之前

点击之后

但ios和Android情况各不相同，需要分别处理。

Android

一个label，两个input搞定，既然隐藏了搜索组件的input1。那我们就新建另一个隐藏的input2。

display: block;
position: absolute;
z-index: -1;
left: -1000px;
top: 0px;

点击label–>input2聚焦–>键盘起–>input1.focus()

为什么ios这样行不通？因为在两个input焦点切换的时候，键盘会收起来，聚焦到input1的时候已经拉不起来了。

ios

幸运的是，被误打误撞了另外一种方法，在touchstart事件时，直接focus到input上。

btn.addEventListener('touchstart', function(evt){   
  if(isIos){   
      evt.preventDefault();   
      evt.stopPropagation();   
      input.focus()   
  }

必须阻止默认行为，也不能冒泡，而且click事件是不行的。个人猜测原因可能是click有延迟，用户触摸屏幕，无法及时的focus。preventDefault和stopPropagation也是为了防止焦点到其他的元素上。

搜索按钮

右下角显示搜索，而不是换行。这里就用到了type=”search”，但是必须要在form标签内，否则是无效的。

<form>
    <input id="j_input" type="search" class="search__input" placeholder="搜索话题">
</form>

防止在点击搜索，页面刷新在form的onsubmit事件return false就好了。

点击这里体验demo。

参考：
http://4pcbr.com/topic/how_to_open_keyboard_on_ipad_with_js

https://about.zoosk.com/zh/engineering-blog/mobile-web-design-use-html5-to-trigger-the-appropriate-keyboard-for-form-inputs/

http://html5doctor.com/html5-forms-input-types/

http://mobileinputtypes.com/

个人知乎，欢迎关注：https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】