js解决软键盘遮挡输入框的问题分享

  

  

  

ios端(身体的)美元.scrollTop()会改变

  

android端(窗口)美元.height()会改变

  

拉起键盘不是一瞬间,而是有一个缓动过程

  

  

ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图:

  

 js解决软键盘遮挡输入框的问题分享

  

  

我们只需要在输入框聚焦之后,开启一个定时器,执行(身体的)美元.scrollTop(1000000),这样由于整个身体滚动到了最下面,输入框自然就看见了,具体请查看以下示例

  

<强>示例源码

        & lt; !DOCTYPE html>   & lt; html lang=癳n”比;   & lt; head>   & lt;元charset=皍tf - 8”比;   & lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”比;   & lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”/比;   & lt; title> demo   & lt;脚本src=" https://www.yisu.com/js/jquery-1.11.3.min.js "祝辞& lt;/script>   & lt; style>   * {   保证金:0;   填充:0;   }   身体,html {   宽度:100%;   高度:100%;   }   .bottom {   位置:绝对的;   左:0;   底部:0;   宽度:100%;   字体大小:0;   }   输入{   字体大小:14 px;   box-sizing: border-box;   宽度:50%;   高度:50 px;   行高:50 px;   }   & lt;/style>   & lt;/head>   & lt; body>   & lt; div类="底"比;   & lt;输入类=" aInput " type="文本"占位符=癷os聚焦后会被输入法遮挡”/比;   & lt;输入类=" bInput " type="文本"占位符=癷os聚焦后不会被输入法遮挡”/比;   & lt;/div>   & lt;/body>   & lt; script>   $(函数(){//解决输入法遮挡   var计时器=零;   $ (' .bInput ')。(“焦点”,函数(){   clearInterval(计时器);   var指数=0;   计时器=setInterval(函数(){   如果(index> 5) {   $('体').scrollTop (1000000);   clearInterval(计时器);   }   指数+ +;   },50)   })   });      & lt;/script>   & lt;/html>      

以上这篇js解决软键盘遮挡输入框的问题分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

js解决软键盘遮挡输入框的问题分享