如果input的父容器position为absolute/fixed,那么很可能会遇到input框点击后,会被弹出的系统软键盘给遮挡住,造成无法正常输入的后果。
一般有两种解决办法:
1 监听window的resize事件,进行相应的高度或位置调整。
var winHeight = $(window).height();
$(window).resize(function() {
var thisHeight = $(this).height();
if (winHeight - thisHeight > 50) {
//软键盘弹出
$('body').css('height', winHeight + 'px');
} else {
$('body').css('height', '100%');
}
});
2. 监听input输入框获得焦点和失去焦点的事件,进行相应地处理。
function fixIMEOf(nodeId, topOrg, topNew) {
var node = document.getElementById(nodeId);
if(node!=null) {
node.addEventListener('focusin', function() {
if(!Q.isIOS()) {//iOS上一般不会有这个问题
//将input的父容器往上移动,移出遮挡区
node.parentNode.style.top = topNew + 'px';
}
});
node.addEventListener('focusout', function() {
window.scrollTo(0,0);//解决iOS上,关闭软键盘后,页面可能不下移,造成页面底部留白的问题
if(!Q.isIOS()) {
node.parentNode.style.top = topOrg + 'px';
}
});
}
}