1.键盘弹出时的表现
ios
原生app提供的可视区域变小，webview高度不变，整体往上滚，且最大滚动高度为键盘高度。
安卓
原生app提供的可视区域变小，webview高度会发生改变，高度为可视区高度（原高度减去键盘高度），webview 本身不能滚动。页面内容如果比较多超出webview高度可以产生滚动。
2.键盘收起时的表现
ios
触发键盘上的“收起”按钮或者输入框以外的页面区域时，输入框失去焦点，软键盘收起。
安卓
点击输入框以外的区域时，输入框失去焦点，键盘收起。但是，触发键盘上的收起按钮键盘时，输入框并不会失去焦点，同样键盘收起。
3.如何监听键盘弹出？
// 判断设备类型
var judgeDeviceType = (function () {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIOS: isIOS,
isAndroid: isAndroid
};
})();
// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) {
if (judgeDeviceType.isIOS) {
// IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
$input.addEventListener(
'focus',
function () {
alert('IOS 键盘弹起啦！');
// IOS 键盘弹起后操作
},
false
);
// IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
$input.addEventListener('blur', () => {
alert('IOS 键盘收起啦！');
// IOS 键盘收起后操作
});
}
// Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
if (judgeDeviceType.isAndroid) {
var originHeight =
document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener(
'resize',
function () {
var resizeHeight =
document.documentElement.clientHeight ||
document.body.clientHeight;
if (originHeight < resizeHeight) {
alert('Android 键盘收起啦！');
// Android 键盘收起后操作
} else {
alert('Android 键盘弹起啦！');
// Android 键盘弹起后操作
}
originHeight = resizeHeight;
},
false
);
}
}
4.移动端如何自动呼起键盘
在当前页面中自动呼起键盘
<input id="test" type="text" /><button id="btn">点击</button>
<script>
// ①autofocus 属性在安卓上可以focus，但是不能呼起键盘；在ios上不能focus，也不能呼起键盘
// ②document.querySelector('#test').focus(); 在安卓上可以focus，但是不能呼起键盘；在ios上不能focus，也不能呼起键盘
// ③先click后focus在安卓和ios都可以focus并且可以呼起键盘
document.querySelector('#btn').addEventListener('click', function() {
document.querySelector('#test').focus();
});
</script>
❌ 安卓和ios在呼起键盘时都会判断这个操作是否是用户主动触发的，如果不是就不响应。
✔️ 先click后focus，现在有了用户的主动点击操作，于是键盘可以弹出。
那么如何在路由改变的情况下自动呼起键盘呢？
👉 单页项目里遇到一个问题，从首页点击搜索按钮跳转到搜索页后顶部的input框需要自动focus并且呼起键盘。
我们的解决办法是在index.html中提前放置一个input并且隐藏起来，当点击搜索按钮就手动调用这个input的focus方法，这样 先click后立马focus这个条件就达到了, 然后在这个input按钮的onfocus事件中再去调用 搜索页中的input框的focus方法。
<input
id="trigger-input"
style="opacity: 0; position: fixed; left: -999px; width: 0; height: 0;"
/>
<script type="text/javascript">
function handleTriggerInputClick() {
var startTime = Date.now();
// 因为是跳转页面，所以需要轮询判断目标页面的input是否已经渲染好
var focusTimer = setInterval(() => {
if (
document.querySelector('.search-input') &&
document.querySelector('.search-input').children[0]
) {
clearInterval(focusTimer);
document.querySelector('.search-input').children[0].focus();
}
if (Date.now() - startTime > 3 * 1000) {
clearInterval(focusTimer);
}
}, 300);
}
</script>
document.querySelector('#trigger-input').focus();
实际测试中，当跳转到搜索页
- ios和安卓都能正常focus和呼起键盘
尝试不再调用搜索页中input框的focus方法
-
ios下搜索页input框仍然会自动focus和呼起键盘。搜索页input框仍然会自动focus就有点诡异了，ios还能自动检测当前页面存在的input并focus吗？
-
安卓，搜索页input框不会focus，依旧能呼起键盘
参考:
