移动端文本框被原生键盘弹出后挡住文本框

Posted 简一118

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端文本框被原生键盘弹出后挡住文本框相关的知识,希望对你有一定的参考价值。

 

html

<input id="val_name" type="text" placeholder="姓名"  onfocus="fup(val_name)" onblur="fdown(val_name)" >

 
js:
function fup(id){
    setTimeout(function () {
        id.scrollIntoView(true);
    },100)
}
function fdown(id){
    setTimeout(function () {
        id.scrollIntoView(false);
    },100)
}

  

 

如果为true,则元素将在其所在滚动区的可视区域中居中对齐。  

如果为false,则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。  

以上是关于移动端文本框被原生键盘弹出后挡住文本框的主要内容,如果未能解决你的问题,请参考以下文章

移动端输入框被手机键盘挡住

web页面移动端键盘弹出后对页面布局的影响

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

移动端 模拟键盘 盖住表单

移动端中 H5输入框在弹起键盘后被遮挡

安卓手机点输入输入框不出来键盘