首页 > 移动平台 > 详细

移动端软键盘弹出时文本输入框下沉、获取焦点并弹出软键盘

时间:2020-01-20 19:29:11      阅读:97      评论:0      收藏:0      [点我收藏+]

## 文本输入框容易下沉因为软键盘弹出时是一个动画 ##

//方法:利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过0.5秒设置一次,
//这个是因为软键盘还没有完全弹出滚动条已经到此时的底部了,等软键盘完全弹出后就遮住了输入框(需要再次设置滚动条)。

let interval;

//消息框获取焦点
 document.querySelector(‘.class或者#id‘).onfocus = function(){
   interval = setInterval(function() {
        document.body.scrollTop = document.body.scrollHeight;
    }, 500)
}

//消息框失去焦点
document.querySelector(‘.class或者#id‘).onblur = function(){
    clearInterval(interval);
}

以上是借鉴segmentfault前辈总结


文本输入框获取焦点并弹出软键盘(适用文本框开始隐藏需要触发显示)

解决思路:获取焦点并弹出软键盘的前提(移动端我的理解)要让输入框显示出来,这里就可以通过层或者透明度(opacity)来解决,由于业务关系透明度不适用所以大多数采用了层(z-index)来解决。

效果:点击按钮弹出输入框获取焦点并弹出软键盘(类似微信朋友圈、QQ空间)。

移动端软键盘弹出时文本输入框下沉、获取焦点并弹出软键盘

原文:https://www.cnblogs.com/10yearsmanong/p/12218921.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!