精华内容
下载资源
问答
  • 首先,提一下作者踩过的大坑,那就是使用resize监听窗口大小的做法,经尝试,发现软键盘弹出是,并不会触发这个监听事件。另外一种,是可行的解决方案,那就是通过APP本身去处理这个问题,由APP向JS暴露...

    作者在记录本篇文章之前,也尝试去撸过网上提供的一些其他解决方案,但发现都不好使,于是,自己反复推敲自己的需求,最终找到一条还算可行的解决方案。同时,也借此机会分享给有需要的朋友,希望可以帮助到大家。

    首先,提一下作者踩过的大坑,那就是使用resize监听窗口大小的做法,经尝试,发现软键盘弹出是,并不会触发这个监听事件。

    另外一种,是可行的解决方案,那就是通过APP本身去处理这个问题,由APP向JS暴露软键盘展开或收缩的方法,H5通过这个暴露的方法判断软键盘的展开和收缩,从而对页面进行相应的渲染。这个方法虽然作者自己没有去尝试过,但应该是可行的。(这里的APP指Android和IOS)

    还有一种解决方案,那就是作者自己总结出来的,具体看代码示例吧:

    注意:样式要设置滚动属性且高度要大于当前屏幕高度,要不然scrollIntoView将无效

    input标签给点击事件和失去焦点事件

    (唯一美中不足的就是收起软键盘的时候,需要向下滑动或让input失去焦点才可以回到顶部)

    export default {

    name: "test",

    data(){

    return{

    }

    },

    methods: {

    //处理键盘覆盖

    handleKeyboardCover(type){

    if(type == 1){

    document.getElementsByClassName('prevent-cover')[0].scrollIntoView();

    }else{

    document.getElementById('test').scrollIntoView();

    }

    },

    },

    }

    .test{

    height: 20rem;//120%

    overflow: auto;

    background: #ccc;

    margin: 0 auto;

    text-align: center;

    display: block;

    }

    .test input{

    width: 80%;

    height: 40px;

    padding: 0 5px;

    margin: 0 auto;

    border-radius: 5px;

    display: block;

    margin-top: 20px;

    }

    结果图如下:(浏览器模拟视图)

    %5Cpic_def8db1a271af7c2c1ef0c2523a94bc6.png

    %5Cpic_340d167af274bc57fde15cc554d43e92.png

    展开全文
  • 问题如图一个表单:在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘遮挡,原因是第三方输入法的tool bar或者键盘当做...

    问题

    如图一个表单:

    ddf1b6789e0d1f9130c8a2dc1b1d38d9.png

    在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法的tool bar或者键盘也被当做可视区域,这里不做讨论)

    问题分析及解决办法确立

    最常见的是使用两个方法:scrollIntoViewIfNeeded()、scrollIntoView(),使用方法自行百度。在我这里无效。

    经测试发现android弹出键盘时有两种效果:

    1.将activity挤压,键盘也占一部分activity空间;

    2.键盘弹出在浏览器上面覆盖一层,不影响浏览器大小。

    第二种会出现遮挡问题

    于是想到以下两种方案:

    1.通过动态增加页面高度和设置scrollTop来使输入框到达合适的位置

    2.设置相对定位,通过top来使输入框到达合适的位置

    影响实现的两个点:

    1.js拿不到键盘的弹出和收起事件;

    2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。

    解决

    第一种经试验有些问题影响了实现,这里只讨论第二种。

    直接上代码,这里是react项目(css设置absolute配合js改变top实现效果,transition过渡增强用户体验,这里就不放了)

    getElementOffsetTop(el) {

    let top = el.offsetTop

    let cur = el.offsetParent

    while(cur != null){

    top += cur.offsetTop

    cur = cur.offsetParent

    }

    return top

    }

    componentDidMount() {

    const u = navigator.userAgent

    const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端

    // alert('android'+isAndroid)

    if(isAndroid){ // android统一处理,不影响ios的自身处理

    const body = document.getElementsByTagName('body')[0] // 兼容获取body

    const regDom = document.querySelector('.wrapper_register') // 获取页面根元素

    const content = document.querySelector('.content') // 表单内容部分

    // const scrollHeight = body.scrollHeight // 网页文档高

    // const scrollTop = body.scrollTop// 卷上去的高

    const clientHeight = body.clientHeight //可见高

    const fixHeight = clientHeight/3 // 定位高,弹出键盘时input距浏览器上部的距离,自己定义合适的

    // 符合需弹出键盘的元素query

    const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'

    const inputs = content.querySelectorAll(queryStr)

    // console.log(inputs)

    const offsetTopArr = Array.prototype.map.call(inputs,item=>{

    return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离,需此方法获取到元素距顶部的距离

    })

    inputs.forEach((item, i)=>{

    item.addEventListener('focus',()=>{

    // 改变top上移页面

    regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'

    })

    item.addEventListener('blur',()=>{

    // 恢复top

    regDom.style.top = 0

    })

    })

    }

    }

    效果基本实现,这里还有两个问题:

    第一,如果下面的提交按钮是fixed,有些手机键盘弹出时会把按钮顶上来,如果上述代码中fixHeight设置不合适,会导致这个按钮遮挡输入框。所以为了统一效果,将底部按钮取消fixed,随页面滚动。

    第二,如果点击键盘上的收起键盘按钮,会导致页面top无法恢复,因为没有触发输入框失焦方法,需点击空白处恢复。(目前没找到解决办法)

    后续

    1.由于android弹出键盘存在一定延迟,所以可以给top更改添加setTimeout,设置合适的延迟时间。

    2.两个h5框架,iScroll、Native.js(虽然在这个问题上没啥用)

    3.最终奥义:修改设计稿,三招 -> 使输入框不在页面的下半部分、采用分页设计、弹出输入层(ps:要和产品和设计沟通,客户不一定会让步 0.0)

    希望大家斧正,交流更好地解决方案,谢谢

    展开全文
  • ”在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况。在 input/textarea 输入框获取焦点时,会自动触发键盘弹起,而键盘弹出在 ios 与 android 的 webview 中...

    019c380f8967a84d294eeceeb1c93507.png

     我们经常需要填写表单,键盘的行为存在各种差异。

    在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况。在 input/textarea 输入框获取焦点时,会自动触发键盘弹起,而键盘弹出在 ios 与 android 的 webview 中表现并非一致,同时当我们主动触发键盘收起时也同样存在差异化。而无论如何,我们希望功能流畅的同时,尽量保持用户体验的一致性,因此有了下面一系列兼容性问题的研究。

    01

    键盘弹出的不同表现

    • IOS:IOS 的键盘处在窗口的最上层,当键盘弹起时,webview 的高度 height 并没有改变,只是 scrollTop 发生变化,页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度,而只有键盘弹出时页面恰好也滚动到最底部时,scrollTop 的变化值为键盘的高度,其他情况下则无法获取。这就导致在 IOS 情况下难以获取键盘的真实高度。

    • Android: webview 中留出空间,该空间小于等于的键盘空间,变化的高度差会随着布局而不同,有的认为 键盘高度 + 页面高度 = 原页面高度; 是错误的误导,只有在某种很巧合的布局情况下才可套用此公式。

    02

    键盘收起的不同表现

    • IOS:触发键盘上的按钮收起键盘或者输入框以外的页面区域时,输入框会失去焦点,因此会触发输入框的 blur 事件。

    • Android: 触发键盘上的按钮收起键盘时,输入框并不会失去焦点,因此不会触发页面的 blur 事件;触发输入框以外的区域时,输入框会失去焦点,触发输入框的 blur 事件。

    03

    监听键盘的弹出与收起

    在 h5 中目前没有接口可以直接监听键盘事件,但我们可以通过分析键盘弹出、收起的触发过程及表现形式,来判断键盘是弹出还是收起的状态。

    • 键盘弹出:输入框获取焦点时会自动触发键盘的弹起动作,因此,我们可以监听输入框的 focus 事件,在里面实现键盘弹出后所需的页面逻辑。这在 ios 及 android 中表现一致。

    • 键盘收起:从第 2 部分可知,触发键盘收起的不同形式会存在差异化表现,当触发其他页面区域收起键盘时,我们可以监听输入框的 blur 事件,在里面实现键盘收起后所需的页面逻辑。而在通过键盘按钮收起键盘时在 ios 与 android 端存在差异化表现,下面具体分析:

    • IOS:触发了输入框 blur 事件,仍然通过该办法监听。

    • Android:没有触发输入框的 blur 事件。但通过第 1、2 部分我们可以知道,在 android 中,键盘的状态切换(弹出、收起)不仅和输入框关联,同时还会影响到 webview 高度的变化,那我们不妨通过监听 webview height 的变化来判断键盘是否收起。

    下面举例说明,其中页面中含有一个输入框:

    class="txd">

       Welcome to TXD!  

    class="input">

        id="input" type="tel" />

    ios & android 键盘弹出:

    const $input = document.getElementById('input');

    $input.addEventListener('focus', () => {

       // 处理键盘弹出后所需的页面逻辑

    }, false);

    ios 键盘收起:

    const $input = document.getElementById('input');

    $input.addEventListener('blur', () => {

       // 处理键盘收起后所需的页面逻辑

    }, false);

    android 键盘弹出与收起:

    /*键盘弹起后页面高度变小*/

    const originHeight = document.documentElement.clientHeight || document.body.clientHeight;

    window.addEventListener('resize', () => {

       const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;

       if (resizeHeight < originHeight) {

           // 键盘弹起所后所需的页面逻辑

       } else {

           // 键盘弹起所后所需的页面逻辑

       }

    }, false);

    在实践中通过判断 userAgent 来决定使用哪种方法:

    const ua = window.navigator.userAgent.toLocaleLowerCase();

    const isIOS = /iphone|ipad|ipod/.test(ua);

    const isAndroid = /android/.test(ua);

    04

    使用场景

    接下来根据上面的讨论说明几种常见场景:

    (1)头部及中间输入框处于正常的文档流,底部元素 fixeda22db2432e3546f74df123b3e5738f13.png

    ios 键盘遮挡在页面上,页面高度始终不变,页面可以滚动,底部元素被遮挡;

    android 页面高度减少,页面不可滚动,fixed 元素的 bottom 属性的基线为键盘;

    (2)头部及输入框处于正常文档流,且所占可视区域变大,底部元素 fixed

    090305f8b6cc23627e5429cc14026c4c.png

    ios 的 height 没有发生变化,页面可以滚动;

    android 页面高度变小,但为了使正常文档流的元素可以正常显示,页面可以上下滚动,fixed 元素的 bottom 属性的基线为键盘;

    (3)头部处于正常文档流,输入框脱离正常文档流 fixed bottom 定位5caec11afa3346e33b121b6a1422be8c.png
    (上面为了便于观察,将输入框包裹元素的背景设置了透明度)

    ios 的 height 没有发生变化,且始终保证输入框处于可视区域中;

    android 页面高度变小,页面不可滚动,fixed 输入框 bottom 属性的基线为键盘;

    05

    小结

    1. 在 ios 中,无论何种布局,为了使输入框展示在可视区域中,键盘弹出时,页面会向上滚动,该过程与 Element.scrollIntoViewIfNeeded() 方法(将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域)产生的效果一致;且高度始终不变,页面可滚动。

    2. 在 android 中,键盘唤起后,页面可滚动与否由其处在正常文档流中的元素决定:如果正常文档流中的元素可全量展示,页面不可滚动,否则页面支持滚动;

    3. 在 android 中,键盘唤起后,fixed 元素的基准会发生变化:根据 bottom 定位的元素,其基线变为键盘上部;根据 top 定位的元素,仍然根据页面顶部,因此为照顾正常文档流及 fixed 元素的用户体验,有的元素可根据顶部定位,有的可以根据底部定位。

    在了解清楚 h5 中键盘的弹出收起的性质后,在处理兼容性问题会容易很多。同时也可使用Element.scrollIntoViewIfNeeded() 方法辅助解决问题(比如在切换不同的输入法时,可能导致有用信息被遮挡的情况)优化体验。

    c3e75a76c95710e4b63a5da239339580.png

    展开全文
  • 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述:input输入框光标,在安卓...

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。

    1、ios端兼容input光标高度

    问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上

    当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。

    e4b16e8afa2cc86dac0f6bd6833b3484.png

    出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时候,光标的高度就自动和父盒子的高度一样了。(谷歌浏览器的设计原则,还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值,当有内容时,光标从input的顶端到文字的底部

    解决办法:高度height和行高line-height内容用padding撑开

    例如:

    .content{  float: left;  box-sizing: border-box;  height: 88px;  width: calc(100% - 240px);                .content-input{     display: block;     box-sizing: border-box;     width: 100%;     color: #333333;     font-size: 28px;     //line-height: 88px;     padding-top: 20px;     padding-bottom: 20px;  }}

    2、ios端微信h5页面上下滑动时卡顿、页面缺失

    问题详情描述:在ios端,上下滑动页面时,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后,卡顿导致如左图下面部分丢失。

    4c062ef4938cc503b080b58d411e1f50.png

    出现原因分析:

    笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。【有待考证】

    解决办法:只需要在公共样式加入下面这行代码

    *{  -webkit-overflow-scrolling: touch;}

    But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug。

    拓展知识: -webkit-overflow-scrolling:touch是什么?

    MDN上是这样定义的:

    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto : 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 touch : 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

    3、ios键盘唤起,键盘收起以后页面不归位

    问题详情描述:

     输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑

    出现原因分析:

    固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

    解决办法:

    class="list-warp"> <div class="title"><span>投·被保险人姓名span>div>
    class="content"> <input class="content-input" placeholder="请输入姓名" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/>    div> </div>
    changeBlur(){   let u = navigator.userAgent, app = navigator.appVersion;   let isIOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);   if(isIOS){      setTimeout(() => {         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0         window.scrollTo(0, Math.max(scrollHeight - 1, 0))      }, 200)   } }

    拓展知识: position: fixed的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘

    4、安卓弹出的键盘遮盖文本框

    问题详情描述:

    安卓微信H5弹出软键盘后挡住input输入框,如下左图是期待唤起键盘的时候样子,右边是实际唤起键盘的样子

    1959f06738a17c5a2fa9fa45868ef81a.png

    出现原因分析:待补充

    解决办法:给input和textarea标签添加focus事件,如下,先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了

    changefocus(){   let u = navigator.userAgent, app = navigator.appVersion;   let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;   if(isAndroid){      setTimeout(function() {      document.activeElement.scrollIntoViewIfNeeded();      document.activeElement.scrollIntoView();      }, 500);   }}

    拓展知识:

    Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动

    5、Vue中路由使用hash模式,开发微信H5页面分享时在安卓上设置分享成功,但是ios的分享异常

    问题详情描述:

    ios当前页面分享给好友,点击进来是正常,如果二次分享,则跳转到首页;使用vue router跳转到第二个页面后在分享时,分享设置失败;以上安卓分享都是正常

    c6a15eba3e73f841917152f5a8b07ba6.png

    出现原因分析:jssdk是后端进行签署,前端校验,但是有时跨域,ios是分享以后会自动带上 from=singlemessage&isappinstalled=0 以及其他参数,分享朋友圈参数还不一样,貌似系统不一样参数也不一样,但是每次获取url并不能获取后面这些参数

    解决办法:

    (1)可以使用改页面this.$router.push跳转,为window.location.href去跳转,而不使用路由跳转,这样可以使地址栏的地址与当前页的地址一样,可以分享成功(适合分享的页面不多的情况下,作为一个单单页运用,这样刷新页面跳转,还是..)

    (2)把入口地址保存在本地,等需要获取签名的时候 取出来,注意:sessionStorage.setItem(‘href’,href); 只在刚进入单应用的时候保存!【该方法未验证】

    题外话:

    如果能用小程序写的页面,尽量上小程序吧,H5开发在微信开发者工具里看页面效果可能看不出问题,因为不能唤起软键盘。避免频繁线上发布,可以用花生壳或者idcfengye,做内网穿透,搭建一个可以通过域名访问的开发环境的h5页面,在手机上看看效果,对了微信内置浏览器缓存机制。会导致刚提交的代码(特别是js)效果要半个小时左右才生效。

    最后:

    微信H5页面其实很多知识,登陆授权,jssdk授权,这里就只做了分享,当然还有上传图片、微信支付等功能,都可能会遇到坑,以上几个坑也是比较常遇到的,如果有更好的解决方案的话,欢迎在留言区分享

    作者:codercao

    https://juejin.im/post/5d47d2eff265da03f77e4e3a

    fa7209abf27a847cd63ecb5cb623e793.png

    55c3d37b14e440f5b176e563281b0f50.png点这,与大家一起分享本文吧~
    展开全文
  • 转载链接:https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。...
  • iphone端h5页面底部输入框被键盘遮挡问题h5页面在底部放置输入框时,如图 在ios端会出现输入框获取焦点后,中文输入法上横条完全挡住输入框问题,搜索解决方法,在input获取焦点时执行函数,主要scrollIntoView...
  • 我在工作的过程中无论是与原生结合的Hybird的H5页面或者微信公众号页面都会遇到当触发键盘输入行为时,页面窗口往上离开屏幕(与iOS的适配)或者页面高度变小(在微信中打开页面等),现在我们来分析一下各种情况...
  • 前言年后第一天到公司上班,整理一些在移动端H5开发常见的问题给大家做下分享,这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题...
  • h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
  • 今天我要来说说键盘遮挡输入框的问题, 并和大家分享我的解决方案.首先, 需要区分iOS和Android.iOS: 我司用的是UIWebview, 经过验证, >=iOS8.0的版本都会在键盘弹起时自动调整输入框的位置, 让它始终位于可视区域...
  • h5页面中,当输入框在最底部,点击软键盘会出现输入框被遮挡问题,或者是底部有一个固定定位的导航,然而每次一点击输入框,弹出输入法的时候,这个底部的导航会随着输入法顶上去问题。 解决办法:由于弹起...
  • //获取原始窗口的高度 var originalHeight = document.... //软键盘弹起与隐藏 都会引起窗口的高度发生变化 var resizeHeight = document.documentElement.clientHeight || document.body.clientHei..
  • 一个属性搞定: android:windowSoftInputMode="adjustResize" //该属性是软键盘弹出时自动调整布局属性 放在AndroidManifest.xml的对应页面中即可。
  • 键盘高度高于输入框的时候,界面向上拉 从而解决输入框遮挡问题
  • 移动端页面input输入框被键盘遮挡问题 &lt;body class="layout-fixed"&gt; &lt;!-- fixed定位的头部 --&gt; &lt;header&gt; &lt;/header&gt; ...
  • 网上有很多类似例子,我自己也使用vue写一个简单的demo,主要利用flex布局,解决ios端偶现的,fixed或者absolute布局导致的输入框被键盘遮挡问题,至于键盘收起页面卡住等其他问题 请参考链接:h5页面在不同ios设备...
  • // 键盘调起需要时间延时处理,scrollIntoView是H5的api jquery没有这种方法要用原生获取元素 setTimeout(function () { var element = document.getElementById("chatArea"); element.scrollIntoView(true); //...
  • 解决办法是: 添加 cursor-spacing 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  • 在安卓上面,点击页面底部的输入框,软键盘弹出,页面移动上移。而ios上面,点击页面底部输入框,软键盘弹出,输入框看不到了。。。非常蛋疼。查资料说什么的都有,iscroll,jquery-moblie,absolute,fixe,static,...
  • h5键盘遮挡输入框

    千次阅读 2017-04-27 19:47:33
    h5遮挡键盘输入框 scrollintoview
  • 安卓加载h5h5界面有输入框 ,安卓键盘遮住 。 我是在全屏的状态下这样设置有效(亲测) class CustomLinearLayout: LinearLayout { constructor(context: Context?): super(context) { } constructor...
  • js H5 安卓手机键盘遮挡输入框在页面添加以下js监听即可 if ((/Android/gi).test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName == 'INPUT'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 841
精华内容 336
关键字:

h5输入框被键盘遮挡