关于点击input框唤醒键盘导致input被遮盖的问题
关于点击input框唤醒键盘导致input被遮盖的问题
这个问题相信大家在实际开发过程当中都有遇见,我自己也遇见过很多次。之前在百度上看见大多数的方法利用的都是键盘唤醒了之后,页面的实际高度会发生变化。利用这个特点对页面进行一些变动,进而让页面滚动到input框露出。
但是在实际开发过程当中,我在MDN
上发现了一个很好用的方法—— Element.scrollIntoView()
,这个方法就是让当前元素滚动到浏览器窗口的可视区域内部。这个应用场景非常符合我们这个目标需求。
下面来说一下这个方法的应用场景
- 大家可能都知道在iOS端,点击输入框,我们不需要对这个
聚集
和失焦
事件进行监听,他仍然可以在聚集
的时候将内容顶上去,失焦
的时候在把内容降下来。这是iOS的设计原理,iOS方面,我只知道他是视图优先的设计模式,大概含义就是cpu会把资源全都给正处在视图上
的东西
,但是唤醒时候内容被顶起的原理我不是特别了解。(具体是什么原理,我不是特别清楚,如果有对iOS特别了解的小伙伴可以评论给我,我其实挺好奇这一块内容的) - 但是在安卓端有一些手机他们并不像iOS一样会自动将内容顶起和恢复,我们就需要自己添加聚焦和失焦事件,去手动的控制
解决的方法:Element.scrollIntoView()
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
参数
参数 | 属性值 | 描述 |
---|---|---|
空 | 相当于 element.scrollIntoView(true) | |
布尔值 | true | 的话是元素的顶端将和其所在滚动区的可视区域的顶端对齐 |
false | 和底部对齐,对齐的情况还得看你的文档流 | |
对象 | { behavior: 过渡效果 auto(默认值,没有过渡效果)smooth(有过渡效果 ), | |
block:垂直方向的对齐 start" (默认值), "center", "end", 或 "nearest , | ||
inline:水平方向的对齐 start", "center", "end", 或 "nearest(默认值)} |
<div>
<div>
这上面呢 一般就是你自己的代码结构。
</div>
<div id='example__div'>
<input id='example__input' type="text" /> 这个输入框呢就可以理解成你的表单控件
</div>
</div>
我们模拟的场景就是 input框的位置 是在一屏页面的中部或者下部,当我们点击输入框的时候键盘会唤醒,而我们的布局结构不回改变,结果导致输入框被遮遮挡。
这个时候我们就可以给input框添加聚焦事件
如果是原生js的话 就是添加一个focus事件 用jQuery也可以。
<script>
let node = document.getElementById('example__div')
//聚焦事件
document.getElementById('example__input').onfocus = funtion(){
//一般情况下我会选择将包裹input的父元素进行位置的变化
node.scrollIntoView({
block: "start",
behavior: "smooth"
})
}
//失焦事件
document.getElementById('example__input').onblur = funtion(){
//一般情况下我会选择将包裹input的父元素进行位置的变化
node.scrollIntoView({
block: "end",
behavior: "smooth"
})
}
</script>