zoukankan      html  css  js  c++  java
  • 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法:

    方法一:使用window.scrollTo()

    <input type="text" onfocus="inputFocus()"/>
    
    <script>
      function inputFocus(){
        setTimeout(function(){ 
          window.scrollTo(0,document.body.clientHeight); 
        }, 500); 
      }
    </script>

    方法二:使用scrollIntoView

    <input type="text" onfocus="inputFocus()" id="dom"/>
    
    <script> 
      function inputFocus(){
        var dom=document.getElementById('dom')
        setTimeout(function(){
          dom.scrollIntoView(true);
          dom.scrollIntoViewIfNeeded();
        }, 500);
      }
    </script>

    .

  • 相关阅读:
    html+css动态篇
    html+css定位篇
    首页的css
    display详细说明
    html+css 布局篇
    html+css杂记
    JS与ES的关系
    H5本地存储
    JavaScript面向对象
    JavaScript执行上下文
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9593455.html
Copyright © 2011-2022 走看看