移动端JavaScript拉起软键盘
by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。
本文地址:https://www.iamaddy.net/2016/11/mobile-keyboard-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
http://html5doctor.com/html5-forms-input-types/
本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作
本文地址:https://www.iamaddy.net/2016/11/mobile-keyboard-javascript/
个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy
欢迎关注公众号【入门游戏开发】
不错
干货
我的显隐判断,也就是点击按钮出来搜索页面,自动弹起键盘,用了您的方法确实弹起了,但是点击右边的取消按钮重新显示前一页面后再次点击前一页面按钮,搜索页面就不再弹起了,不知是为什么呢
iOS打开页面怎么弹起键盘呢?
文中有说哈