html5手机输入框回车虚拟键盘隐藏,如何解决HTML5 虚拟键盘出现挡住输入框的问题...

本文提供了解决HTML5中虚拟键盘弹出时遮挡输入框的方法。通过监听点击事件和调整滚动视图,确保输入框始终可见。对于部分安卓设备,通过窗口resize事件进一步优化。代码示例详细展示了实现过程,对前端开发者有参考价值。
摘要由CSDN通过智能技术生成

本文主要介绍了HTML5 虚拟键盘出现挡住输入框的解决办法。具有很好的参考价值,下面一起来看下吧

话不多说,请看代码://防止键盘把当前输入框给挡住

$$('input[type="text"],textarea').on('click', function () {

var target = this;

setTimeout(function(){

target.scrollIntoViewIfNeeded();

},100);

});

部分安卓机型适用。if(/Android [4-6]/.test(navigator.appVersion)) {

window.addEventListener("resize", function() {

if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {

window.setTimeout(function() {

document.activeElement.scrollIntoViewIfNeeded();

},0);

}

})

}

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值