在ios中,输入框被软键盘遮住,这是众所周知的bug,那么如何来解决这个问题呢?最近的项目中就遇到了这个问题,然后经过高人指点解决了这个问题,以及遇到的另外一些问题。
首先我们先来说说弹出软键盘,在ios中,弹出软键盘,会将整个页面给怼上去,因此我们只能看到半个页面,然而在andriod中,整个网页高度会缩小,因此我们在弹出软键盘时,能够监听到andriod的窗口大小变化——resize事件,但是ios中,resize事件却没有发生,因为窗口大小没有发生变化。
ios中弹出软键盘后,有时会遮住我们定位在底部的输入框,最近的项目中就遇到了各种ios的坑,哎!
html代码如下:
<div class="bottomInput">
<input id="msgdata" type="text"></input>
<button id="btn" class="wxapp-add-btn" >发送</button>
</div>
js代码如下:
var interval;
function scrollToEnd(){
document.body.scrollTop = document.body.scrollHeight;
}
$("#msgdata").on("focus",function (e) {
interval = setInterval(function() {
scrollToEnd();
}, 500)
})
$("#msgdata").on("blur",function (e) {
clearInterval(interval);
})
$("#btn").on("touchend",function (e) {
e.preventDefault();
alert("消息发送");
})
经过测试,iphone 6s是可行的,后来在6s plus中却遇到问题,如果是使用系统自带的输入法,输入英文是没问题的,但是输入中文却遇到了bug。输入中文,点击发送不能执行,软键盘收回,再次点击发送才能执行发送事件。而且还发现点击输入框,获得焦点,再点击输入框会失去焦点,遇到这个问题,就尴尬了!后来又拿了别的6s plus来测试,在另一台手机上发现,能够输入中文啊,经过对比发现,两个手机的输入法不同,正常点击发送的手机的输入法是第三方输入法。
那么问题就出现在这里了,苹果自带输入法对中文的一个支持问题。怎么办呢?用第三方输入法吧!