正文
judgeDeviceType
.
isIOS
)
{
// IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
$input
.
addEventListener
(
'focus'
,
function
()
{
console
.
log
(
'IOS 键盘弹起啦！'
);
// IOS 键盘弹起后操作
},
false
)
// IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
$input
.
addEventListener
(
'blur'
,
()
=>
{
console
.
log
(
'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
)
{
console
.
log
(
'Android 键盘收起啦！'
);
// Android 键盘收起后操作
}
else
{
console
.
log
(
'Android 键盘弹起啦！'
);
// Android 键盘弹起后操作
}
originHeight
=
resizeHeight
;
},
false
)
}
}
var
$inputs
=
document
.
querySelectorAll
(
'.input'
);
for
(
var
i
=
0
;
i
<
$inputs
.
length
;
i
++)
{
listenKeybord
(
$inputs
[
i
]);
}
弹起软键盘始终让输入框滚动到可视区
有时我们会做一个输入表单，有很多输入项，输入框获取焦点，弹起软键盘。当输入框位于页面下部位置时，在
IOS
上，会将
webview
整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在
Android
则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区。
由于上面已经实现监听
IOS
和
Android
键盘弹起和收起，在这里，只需在
Android
键盘弹起后，将焦点元素滚动（
scrollIntoView
()
）到可视区。查看效果，可以戳这里。
// 获取到焦点元素滚动到可视区
function activeElementScrollIntoView(activeElement, delay) {
var editable = activeElement.getAttribute('contenteditable')
// 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
if (activeElement.
