## 文本输入框容易下沉由于软键盘弹出时是一个动画 ##segmentfault
//方法:利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过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空间)。code