by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:http://www.iamaddy.net/2016/11/mobile-keyboard-javascript/

先上图来镇楼

移动端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,然后显示搜索组件。 移动端JavaScript拉起软键盘

点击之前
移动端JavaScript拉起软键盘

点击之后
移动端JavaScript拉起软键盘

但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也是为了防止焦点到其他的元素上。

搜索按钮

移动端JavaScript拉起软键盘 移动端JavaScript拉起软键盘

右下角显示搜索,而不是换行。这里就用到了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/

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:http://www.iamaddy.net/2016/11/mobile-keyboard-javascript/

想要打赏?你的鼓励是我前进的动力! addy打赏二维码

关注个人公众号web_lab,不定期更新一些干货~ web_lab公众号