当前位置: 首页 > Web前端 > HTML

移动端软键盘弹出时,文字输入框下沉,获取焦点弹出软键盘

时间:2023-04-02 22:55:14 HTML

##文字输入框容易下沉,因为软键盘弹出时是动画##//方法:使用滚动条弹出软键盘让滚动条滚动到底部。并设置一个定时器,每0.5秒设置一次。//这是因为此时软键盘还没有完全弹出,滚动条已经到了底部。软键盘完全弹出后,输入框会被覆盖(需要重新设置scrollstrip)。letinterval;//消息框获取焦点},500)}//消息框失去焦点document.querySelector('.classor#id').onblur=function(){clearInterval(interval);}以上是学习segmentfault前辈总结的文inputbox获取焦点弹出软键盘(适用的文本框开始隐藏,需要触发显示)解决思路:获取焦点弹出软键盘的前提(移动端我的理解)要使输入框显示,这里可以通过图层或者不透明度(opacity)来解决,由于业务关系透明度不适用所以大多使用图层(z-index)来解决。效果:点击按钮弹出输入框获取焦点,弹出软键盘(类似微信朋友圈,QQ空间)。