精华内容
下载资源
问答
  • 2022-03-11 16:15:21

    H5IOS键盘遮住输入框解决方案

       var u = navigator.userAgent;

            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

            if (isiOS) {

              setTimeout(function() {

                window.scrollTo(0, 1334);

              }, 10);

            }

    更多相关内容
  • 在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好。像微信则直接把登录按钮做在输入框的...
  • 问题移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法的tool bar或者键盘...

    问题

    移动端浏览器中的表单在部分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)

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

    展开全文
  • 由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况) 1.input下方还有多余空位能够提供滚动 那么...

    由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况)

    1.input下方还有多余空位能够提供滚动

    那么只需要一句代码就可以处理

    setTimeout(function(){
                            if('scrollIntoView' in document.activeElement) {
                                document.activeElement.scrollIntoView();
                            } else {
                                document.activeElement.scrollIntoViewIfNeeded();
                            }
                    },400);

    2.input下方没有多余空间给页面滚动到可是区域了(也就是说input在页面最下面并且不是浮动的)

    那么我们需要手动插入空白让页面有足够的空间进行1中的滚动

    append进去的元素要比scrollIntoView先执行否则不生效(最好有定时器)

    下面是完整代码:

    var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1; 
            if (isAndroid) {
                //软键盘处理,建议不要处理
                var isredundant = false;
                $('.r-email,.r-code').on('blur', function(){//r-email和r-code是在最底下要处理的input元素
                        setTimeout(function(){//做定时器是为了要让focus触发后再判断占位元素状态再执行
                            if (isredundant) {
                                isredundant = false;
                            }else{
                                $('.redundant_div').css('display','none');
                                isredundant = false;
                            }
                        }, 100)
                })
                $('input[type="text"],textarea').on('focus', function () {
                    if ($(this).attr('class') == 'r-email' || $(this).attr('class') == 'r-code') {
                        if ($('.redundant_div').length > 0) {//如果之前是已经有插入的占位元素的,那么给出标识,让blur的时候不隐藏占位元素
                            if ($('.redundant_div').css('display') != 'none') {//如果占位元素在就给状态
                                isredundant = true;
                            }
                            setTimeout(function(){//这里的定时器要比blur的长否则一直是隐藏的
                                $('.redundant_div').css('display','block')
                            },150)
                        }else{
                            $('.personal-data').append('<div class="redundant_div" style="width: 100%;height: 200px;"></div>')
                            setTimeout(function(){
                                $('.redundant_div').css('display','block')
                            },150)
                        }
                    }
                    setTimeout(function(){
                            // if (target.scrollIntoViewIfNeeded) {
                            //     target.scrollIntoViewIfNeeded();
                            // }
                            
                            if('scrollIntoView' in document.activeElement) {
                                document.activeElement.scrollIntoView();
                            } else {
                                document.activeElement.scrollIntoViewIfNeeded();
                            }
                    },400);
                });
            }

     

    转载于:https://www.cnblogs.com/lichuntian/p/9457736.html

    展开全文
  • <input type="text" value="" class="tinput"/> //针对直接在浏览器打开此方法有效 $('.tinput').bind('focus', ... // 软键盘弹起之后再调整滚动条位置 if ($(this).offset().top > document.body.s...
    <input type="text" value="" class="tinput"/>
    
    //针对直接在浏览器打开此方法有效
     $('.tinput').bind('focus', function() {
                // 软键盘弹起之后再调整滚动条位置
                if ($(this).offset().top > document.body.scrollHeight / 2) {
                    setTimeout(function () {
                        window.scrollTo(0,document.body.scrollHeight);
                    }, 500);
                }
     });
    
    //针对嵌入app页面用以下方法
    $('.tinput').focus(function(e){
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                if(isAndroid){
                $('body').height( $('body').height()+300)
                $('body').scrollTop(300)
                }
            })
            // 失去焦点时重新回到原来的状态
            $('.tinput').blur(function(e){
                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                if(isAndroid){
                $('body').height( $('body').height()-300)
                $('body').scrollTop(0)
                }
            })

     

    展开全文
  • h5页面在Android上面显示的时候软键盘遮挡输入框,而且resize事件监听不到,IOS上面会顶起输入框,如果不依赖客户端,单独H5解决这个问题,哪位有好的办法,获取到软键盘的高度或者是定位到软键盘弹起之后的位置
  • 首先,提一下作者踩过的大坑,那就是使用resize监听窗口大小的做法,经尝试,发现软键盘弹出是,并不会触发这个监听事件。另外一种,是可行的解决方案,那就是通过APP本身去处理这个问题,由APP向JS暴露...
  • 最近做混合app开发的时候,遇到一个很头疼的问题,在ios上,输入文本时,软键盘会挡住输入框,如下图。 当发完一条消息后,软键盘会弹起挡住输入框,发第二条消息的时候,就不得不先收起软键盘,用户体验很差。而...
  • 问题描述在移动端 H5 开发中,我们经常会碰到输入框固定在页面底部的布局情况,比如聊天应用,文章评论等。当我们点击输入框输入文字时,系统会弹出虚拟键盘以便输入内容,这个时候会有几种情况出现:输入框随着页面...
  • 之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,...
  • 解决安卓嵌套H5软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
  • // An highlighted block <input type="text" value="" class="tinput" />; //针对直接在浏览器打开... // 软键盘弹起之后再调整滚动条位置 if ($(this).offset().top > document.body.scrollHeight / 2) {
  • 主要给大家介绍了关于react在安卓中输入框被手机键盘遮挡问题的解决方法,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
  • 一个属性搞定: android:windowSoftInputMode="adjustResize" //该属性是软键盘弹出时自动调整布局属性 放在AndroidManifest.xml的对应页面中即可。
  • 如何解决H5制作虚拟键盘时出现输入框遮挡情况发布时间:2020-08-11 11:18:57来源:亿速云阅读:76作者:小新如何解决H5制作虚拟键盘时出现输入框遮挡情况?这个问题可能是我们日常学习或工作经常见到的。希望通过这...
  • 检查你的实现方式: 1)加载WebView的... 3)Activity里面不能设置android:windowSoftInputMode的属性,使用默认的属性即可 以上3步即可实现沉浸式状态栏并且能保证你的WebView加载的HTML页面的输入框不被软键盘遮挡
  • 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑——来来来,我们慢慢看。 入门篇   最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹...
  • 关键代码 window.addEventListener('resize', function() { if ( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA' ) { window.setTimeout(function() { ...
  • 1、监听原生软键盘的动作 cordova plugin add ionic-plugin-keyboard //监听原生软键盘的动作 2、在index.js添加相关事件 // 监听键盘隐藏 window.addEventListener('native.keyboardshow',function (e) { ...
  • 设计动态class,当输入框onfocus状态触发事件激活class,并且滚动到页面底部,当输入框onblur状态关闭class <style> .center-box-input-position { margin-top: 0px; } </style> <div class=...
  • <input type="text" value="" class="tinput"/> //针对直接在浏览器打开此... // 软键盘弹起之后再调整滚动条位置 if ($(this).offset().top > document.body.scrollHeight / 2) { setTimeout(function .
  • IOS 键盘挡住输入框的问题解决办法在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好。经过查资料终于解决了这个问题。解决...
  • js 安卓端软键盘遮挡文本框的解决方法 在工作中需要写h5页面供给安卓和ios开发使用,所以会遇到各种不兼容的问题 点击文本框输入东西时,ios端文本框会正常弹出到软键盘之后,但是安卓端的文本框就会还在原处,软...
  • H5移动端弹出键盘遮挡输入框

    千次阅读 2018-03-12 10:22:47
    在写移动端时,如果使用绝对定位Fixed将输入框(input或者textarea),当手机的输入法为自带输入法时可能问题不大,但是当使用类似搜狗等输入法时,由于会高出自带输入法大约30个像素,就会造成输入框被遮盖一部分的...
  • 转载链接:https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。...
  • 移动端软键盘弹起遮挡输入框问题的解决方案 1.背景 原生app与H5页面混合开发时,input输入框唤起软键盘时,输入框被遮挡,分为两种情况: 客户端设置了windowSoftInputMode ="adjustResize"属性,软键盘会将webview...
  •  在EditText获得焦点后,软键盘会相应的弹出,如果EditText位于Activity的底部,则会被弹出的软键盘遮挡住,用户体验不好. 让输入框位于软键盘的上方. 步骤: 1)在相应Activity的清单文件添加 android:...

空空如也

空空如也

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

h5软键盘遮挡输入框