H5软键盘兼容方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可能这些是你想要的H5键盘兼容方案</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
text-align: center;
}
.header {
padding: 20px 0;
box-shadow: 0 1px 1px #dddddd;
}
.content {
margin-top: 100px;
margin: 100px 0 80px;
}
.content input {
border-radius: 4px;
border: 1px solid #dddddd;
height: 26px;
line-height: 26px;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 20px 0;
box-shadow: 0 -1px 1px #dddddd;
}
.header,
.footer {
background-color: #42b983;
color: #ffffff;
}
</style>
</head>
<body>
<header class="header">I am Header</header>
<div class="content">
<p>请输入用户名</p>
<input type="text" class="input">
<p>请输入手机号</p>
<input type="tel" novalidate="novalidate" pattern="[0-9]*" class="input">
<p>请输入密码</p>
<input type="password" class="input">
<p>请重新输入密码</p>
<input type="password" class="input">
</div>
<footer class="footer">I am Footer</footer>
<script>
// 判断设备类型
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 activeElementScrollIntoView(activeElement, delay) {
var editable = activeElement.getAttribute('contenteditable')
// 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
setTimeout(function () {
activeElement.scrollIntoView();
}, delay)
}
}
// 监听输入框的软键盘弹起和收起事件
function listenKeybord($input) {
var scrollTop=0;
if (judgeDeviceType.isIOS) {
// IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
$input.addEventListener('focus', function () {
console.log('IOS 键盘弹起啦！');
scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
$inputs[0].value=scrollTop;
}, false)
// IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
$input.addEventListener('blur', () => {
console.log('IOS 键盘收起啦！');
var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
if (!wechatInfo) return;
var wechatVersion = wechatInfo[1];
var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
}
})
}
// 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) {
console.log('Android 键盘收起啦！');
// Android 键盘收起后操作
// 修复小米浏览器下，输入框依旧被输入法遮挡问题
if (judgeDeviceType.isMiuiBrowser) {
document.body.style.marginBottom = '0px';
}
} else {
console.log('Android 键盘弹起啦！');
// Android 键盘弹起后操作
// 修复小米浏览器下，输入框依旧被输入法遮挡问题
if (judgeDeviceType.isMiuiBrowser) {
document.body.style.marginBottom = '40px';
}
activeElementScrollIntoView($input, 1000);
}
originHeight = resizeHeight;
}, false)
}
}
var $inputs = document.querySelectorAll('.input');
for (var i = 0; i < $inputs.length; i++) {
listenKeybord($inputs[i])
}
</script>
</body>
</html>
