一、需求：进入页面自动聚焦输入框，并弹出软键盘


实测

1、通过js执行focus()，安卓下只聚焦，出现光标，不弹出软键盘；IOS下连光标都未出现。

2、增加autofocus属性，结果同上。

3、将代码放入延迟函数setTimeout 中执行，结果同上。

4、通过button点击执行focus()，文本框聚焦且弹出软键盘


解决方案：

1、通过点击屏幕的其他区域，然后触发input的focus事件,唤起键盘：

进入页面后，给页面加一层遮罩层，点击遮罩层时关闭该层并执行focus()。

2、重写input输入框及软键盘


二、问题：当输入信息时弹出软键盘，因手机屏幕有限汪汪会遮住输入框


解决方案：

scrollIntoViewIfNeeded：只在当前元素在视窗的可见范围内不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。

当虚拟键盘弹出的时候，window的resize事件会被触发。

监听input元素的focus事件，以及window的resize事件。因为focus事件将在resize事件前触发。然后通过scrollIntoViewIfNeeded使输入框可见。


1、监听input元素的focus事件


varinputs=document.getElementsByTagName("input");for(vari=0;i<inputs.length;i++){inputs[i].onclick=function(e){window.setTimeout(function(){e.target.scrollIntoViewIfNeeded();},0);}}



2、监听window的resize事件


if(/Android/gi.test(navigator.userAgent)){window.addEventListener('resize',function(){if(document.activeElement.tagName=='INPUT'||document.activeElement.tagName=='TEXTAREA'){window.setTimeout(function(){document.activeElement.scrollIntoViewIfNeeded();},0);}})}