点击按钮弹出提示框textarea弹出虚拟键盘时,请问怎么把textarea显示到页面的可视区域

在写移动端时如果使用绝对定位Fixed将输入框(input或者textarea),当手机的输入法为自带输入法时可能问题不大,但是当使用类似搜狗等输入法时由于会高出自带输入法大约30个像素,就会造成输入框被遮盖一部分的现象很尴尬。

下边简单说说简单的解决思路当然还有复杂的(四种)。

  1. 延时一定时间重新定位输入框
  2. 点击按钮弹出提示框输入框时加长body元素高度到9999px(当然不一定非要这么高),页面滚动到空白区域再生成输入框添加在当前一屏页面嘚最顶端。

  3. 借助元素的 scrollIntoViewIfNeeded() 方法这个方法执行后如果当前元素在视口中不可见,则会滚动浏览器窗口或容器元素最终让它可见。如果当前え素在视口中已经是可见的这个方法什么也不做。

  4. 页面跳转或者显示隐藏(无疑是最简单的但是可能不能满足产品的要求,或者有点low但是网页版的微博就是如此)。
    今天我们生产代码不再是代码的搬运工。


加上这一段代码,当input或textarea获得焦点触發完美解决

我要回帖

更多关于 点击按钮弹出提示框 的文章

 

随机推荐