精华内容
下载资源
问答
  • 网上有很多类似例子,我自己也使用vue写一个简单的demo,主要利用flex布局,解决ios端偶现的,fixed或者absolute布局导致的输入框被键盘遮挡问题,至于键盘收起页面卡住等其他问题 请参考链接:h5页面在不同ios设备...

    1、说明

    网上有很多类似例子,我自己也使用vue写一个简单的demo,主要利用flex布局,解决ios端偶现的,fixed或者absolute布局导致的输入框被键盘遮挡问题,至于键盘收起页面卡住等其他问题 请参考链接:h5页面在不同ios设备上的问题总结 ,本demo暂时不考虑。

    原理是:使用flex布局,把要滚动的区域置于底层滚动。

    2、表现

    在手机端,微信浏览器和qq浏览器,钉钉浏览器等,都表现的不错,在safri浏览器会有底部固定效果失效的问题,这个问题比较严重,我还没来得及仔细研究原因

    另外,如果手机安装了第三方输入法,比如搜狗输入法,还是会有遮挡问题 ,使用原生键盘没有问题,本demo中,为了解决这个问题,在聚焦的时候,给底部加了一个margin,如果谁有好的办法,请给我留言

    加了margin后原生键盘体现:

    3、代码

    html部分:一个父节点,两个子节点,父节点:flex-test,子节点:一个是要滚动的区域content,一个是footer,固定在底端

    <template>
      <div class="flex-test">
        <!-- 内容区域 -->
        <content class="content">
            <!-- 头部 -->
            <header class="header">header</header>
             <ul v-for="(item,index) in datalist" :key="index">
                <li>{{item}}</li>
             </ul> 
        </content>
        <!-- 底部输入框部 -->
        <footer class="footer">
          <input type="text" class="input">
          <button class="button">submit</button>
        </footer>
      </div>
    </template>
    复制代码

    js部分:为了体现滚动效果,可以给数组加长,我只写了三项是为了文档简洁。

    <script>
    export default {
      name: "pagetest",
    
      data() {
        return {
            datalist:[
                "body数据body数据body数据body数据body数据",
                "body数据body数据body数据body数据body数据",
                "body数据body数据body数据body数据body数据",
            ]
        };
      },
      mounted() {
      
      //这个是给底部固定加一个margin高度,为了解决第三方输入法遮挡问题,当然切换到原生键盘,也会高出一些
        document.querySelector("input").addEventListener("focus", () => {
          document.querySelector("footer").style.marginBottom = "20px";
        });
      },
    };
    </script>
    复制代码

    css 部分:

    <style scoped lang="scss">
    .flex-test {
      display: flex; // 设置flex
      flex-direction: column;
      height: 100vh;  //设置高度为屏幕高度
      
      .content {
        flex: 1;    //这部分内容置于底层,这样content以外的节点,都会在顶层
        overflow: auto;  //超过一屏滚动
        -webkit-overflow-scrolling: touch;
      }
    }
    
    //后面那些css 没什么特殊的,正常按照你的习惯,写底部的样式就行了
    .header {
      height: 5rem;
    }
    .footer {
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #ccc;
      padding: 0 2rem;
      .input {
        width: 200px;
        height: 30px;
         border-radius: 4px;
      }
      .button {
        width: 50px;
        height: 30px;
        background: #fff;
        border-radius: 4px;
      }
    }
    </style>
    复制代码

    示例图片:

    展开全文
  • 问题:安卓手机点击输入框键盘弹起挡住输入框,看不到输入内容 解决方案: 主要是监听页面高度变化,并将input框滚动到视口内 // 记录原有的视口高度 const originalHeight = document.body.clientHeight || ...

    在这里插入图片描述
    问题:安卓手机点击输入框,键盘弹起挡住输入框,看不到输入内容
    解决方案:
    主要是监听页面高度变化,并将input框滚动到视口内

    // 记录原有的视口高度
    const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;
    
    window.onresize = function(){
      var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if(resizeHeight < originalHeight ){
        // 恢复内容区域高度
        let container = document.getElementById("container")
        container.style.height = originalHeight;
        // 记录input 位置
        let offtop = document.getElemet
      }
    }
    
    展开全文
  • //获取原始窗口的高度 var originalHeight = document.... //软键盘弹起与隐藏 都会引起窗口的高度发生变化 var resizeHeight = document.documentElement.clientHeight || document.body.clientHei..
     //获取原始窗口的高度
    		var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    		window.onresize = function() {
    
    			//软键盘弹起与隐藏  都会引起窗口的高度发生变化
    			var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    			if (resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight证明窗口被挤压了
    
    				plus.webview.currentWebview().setStyle({
    					height: originalHeight
    				});
    
    			}
    		}

     

    展开全文
  • 本文主要介绍了关于react在安卓输入框被键盘遮挡的相关内容,分享出来动大家参考学习,下面话不多说了,来一起看看详细的介绍吧 问题概述 今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软...
  • 挡住就算了,整个手机窗口压为原来的二分之一左右; (左边一 效果图) (右边一安卓效果图) 完整代码 因为可能有多个页面要调用,所以我把代码放到一个单独的js文件中: componentDidMount(){ this....

    问题概述

      今天遇到了一个问题,在安卓手机上,当我要点击输入“姓名”时,手机软键盘弹出来把背景图片挤压变形了;整个手机窗口被压为原来的二分之一左右;

    (左边一 效果图 )  (右边一安卓效果图)

    完整代码

    componentDidMount() {
        this.pageInputScroll()
      }
      pageInputScroll() {
        let that =this
        let initWindowHeight=window.innerHeight
        setTimeout(() => {
          let wrapDiv=document.getElementsByClassName('refer1')[0]
          //console.log(wrapDiv.style)
          wrapDiv.style.minHeight =initWindowHeight+'px'
        }, 500);
        //由于我们不能直接知道软键盘什么时候出来,不过软键盘出来的时候窗口高度会缩小,所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出
        window.onresize=function(){ //如果浏览器窗口高度缩小25%以上,就认为是软键盘出来了
          if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
            if(that.offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
              document.body.scrollTop=that.offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
            }
          }else if(window.innerHeight-initWindowHeight<20){
            document.body.scrollTop=0
          }
        };
      }
      offset(element) {
        var offest = {
          top: 0,
          left: 0
        };
        var _position;
        getOffset(element, true);
        return offest;
        // 递归获取 offset, 可以考虑使用 getBoundingClientRect
        function getOffset(node, init) {
          // 非Element 终止递归
          if (node.nodeType !== 1) {
            return;
          }
          _position = window.getComputedStyle(node)['position'];
          // position=static: 继续递归父节点
          if (typeof(init) === 'undefined' && _position === 'static') {
            getOffset(node.parentNode);
            return;
          }
          offest.top = node.offsetTop + offest.top - node.scrollTop;
          offest.left = node.offsetLeft + offest.left - node.scrollLeft;
          // position = fixed: 获取值后退出递归
          if (_position === 'fixed') {
            return;
          }
          getOffset(node.parentNode);
        }
      }

    -------------------------------------------------------------------分割线  下面为思路

     

    实现原理,页面一进来时,我就获取窗口的高度,给最外层的div设置一个最小高度,这样就算窗口压小了,页面还能维持原来的高度,可以滚动浏览:

    let initWindowHeight=window.innerHeight
    let wrapDiv=document.getElementsByClassName('animated-router-forward-enter-done')[0]
    wrapDiv.style.minHeight =initWindowHeight+'px'

     

    第二步,滚到红线处

      由于我们不能直接知道软键盘什么时候出来,不过软键盘出来的时候窗口高度会缩小,所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出,比如浏览器窗口高度突然缩小25%以上,那么我们就认为是软键盘出来了,然后我们获取聚焦input距离页面顶部的距离,计算距离红线有多少距离,假设距离是60,那么我们就让页面向上滚动60,这时input就刚刚好到了红线处;

    window.onresize=function(){
    if(initWindowHeight-window.innerHeight>initWindowHeight/4&&document.querySelectorAll(':focus').length>0){
    if(offset(document.querySelectorAll(':focus')[0]).top>initWindowHeight/4){
    document.body.scrollTop=offset(document.querySelectorAll(':focus')[0]).top-initWindowHeight/4
    }
    }else if(window.innerHeight-initWindowHeight<20){
    document.body.scrollTop=0
    }

     

     

     在react页面中引入js并调用:

    
     import {pageInputScroll} from '../../util/pageInputScroll'
    ......
    componentDidMount(){
    pageInputScroll()
    }

     

    备注

    offset()方法是使用js实现类似jquery的offset()的一个方法,参考自:原生js实现offset方法

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • 经过网上查找,根本原因是ios和安卓的键盘的加载方式不一样 在网上查找了很多解决方法,说到根本就是不用fixed定位,再或是通过监听input框改变除了输入框其他元素的高度 我在这里运用了第一种方式,当检测到安卓...
  • wv.setStyle({//设置web-view距离顶部的距离以及自己的高度,单位为px // top: 44,//此处是距离顶部的高度,应该是你页面的头部 // bottom:0,//防止输入框被键盘遮挡 // height:height,//webview的...
  • 在input 框上 加上class=“uni-input” 和cursor-spacing=“10“ cursor-spacing 是 距离输入框距离键盘的距离
  • WebAPP输入框被键盘遮挡肿么办?

    千次阅读 2016-03-05 19:45:05
    1.输入框被遮挡,看不见输入的内容 2.页面自动上移,但收回软键盘时页面少了一截 3.IOS系统上使用JRoll,IScroll等滑动方案时,光标不随输入框移动 4.软键盘弹出时窗口变小元素错位 目前手机系统、浏览器系统...
  • 每次键盘遮挡输入框之后,必须要手动向上滑动一下屏幕才显示出来,这体验效果就很不好了吧。然后自己就尝试了各种方法,什么定时器、绝对定位、固定定位、计算屏幕高度再定位等等,都没有作用,键盘出来后还是会...
  • 为什么?   为什么要随时监测屏幕大小,这是因为...而我们的输入框可怜的遮挡在小键盘后面 怎么办?  我们不知道小键盘何时会出现,但有一点是可以确定的,当小键盘出现的时候,body的可视区域一定为...
  • $('.gunNums input').focus(function(e){ var u = navigator.userAgent; var isAndroid = u.indexOf('Android') &gt; -1 || u.indexOf('Adr') &gt; -1; //android终端 if...
  • 手机浏览器中如果我们给body设置了高度,然后我们通过input输入框呼出软键盘,如果输入框在页面下方,内容会键盘遮挡住,我们只有滑动滚动条才能看到输入框,这样会很麻烦,也不利于用户体验。 我们可以通过...
  •  里面用的setimeout原因是在安卓下,虚拟键盘的弹出有一点延迟,如果一开始就滚动,虚拟键盘还没弹出,url输入条还没收起,减10是为了不用太贴。灵感来自m.baidu.com页面,百度的输入框就是做了这种处理。 ...
  • 么,在安卓上也是意料之中完美的效果,然并卵,在ios上有时输入框键盘遮挡,经过在度娘上的多方查找,发现原来是ios对fixed布局有兼容问题,导致fixed布局不稳定,软键盘弹起时fixed布局可能会改为absolute...
  • 问题就出在这,透明度调为0之后手机端的软键盘就将这个input给忽略了,导致元素被遮挡。 这里需要按条件去设置透明度 <view class="psw"> <input :class="focusSecond ? 'transparent' : 'notransparent'...
  • 一、问题概述 ... 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 二、简单解决方案 方法一  在你的activity中的oncreate中set
  • 当页面多个输入框,直接从一个输入框点击另一个输入框时,页面会闪动,且input会被键盘遮挡。 解决方案 var isIos=this.isIos(); if(isIos){ FastClick.attach(document.getElementById(“appointment”));//取消...
  • 在写移动端时,如果使用绝对定位Fixed将输入框(input或者textarea),当手机的输入法为自带输入法时可能问题不大,但是当使用类似搜狗等输入法时,由于会高出自带输入法大约30个像素,就会造成输入框被遮盖一部分的...
  • 当界面元素靠下时候的时候,input输入框系统的键盘遮挡。 我们可以让界面向上移动一定距离去避免遮挡。 $('#money').click(function(){ setTimeout(function(){ $(this).scrollIntoView(); // 参数...
  • 产品分类:uniapp/AppPC开发环境操作系统:WindowsPC开发环境操作系统版本号:Win10专业版 1809HBuilderX类型:正式HBuilderX版本号:2.7.9手机系统:Android手机系统版本号:Android 9.0手机厂商:小米手机机型:...

空空如也

空空如也

1 2 3 4
收藏数 66
精华内容 26
关键字:

手机输入框被键盘遮挡