精华内容
下载资源
问答
  • 移动端输入框获取焦点时,唤醒手机键盘挡住输入框以及ios系统键盘回滚,造成用户体验不好 先附上问题图片 , 后面附上代码以及代码图片 在开发中 , 碰到了这些问题, 找过一些资源 , 都没有得到解决,干脆自己想想...
    移动端输入框获取焦点时,唤醒手机键盘挡住输入框以及ios系统键盘回滚,造成用户体验不好
    • 先附上问题图片 , 后面附上代码以及代码图片
    • 使用 scrollIntoView 等都不生效…
    • 在开发中 , 经常会碰到一些问题, 找过一些资源 , 都没有得到解决,干脆自己想想原因动手写 ;
    • 大佬勿喷 , 谢谢指点 . 分享互相学习 . 感谢 csdn 提供平台 ! 周末愉快 !!!

    安卓端问题图片 :

    在这里插入图片描述
    修改后的图片:
    在这里插入图片描述

    ios 系统键盘回滚 :

    问题图片 :

    在这里插入图片描述
    修改后正常显示 :
    在这里插入图片描述

    • 只能提供 vue 组件方法中的解决方法代码 :
     handleScroll() {
            // 判断是否为安卓手机
            var u = navigator.userAgent
            if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
              // 安卓系统
              if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
                // 获取初始化屏幕可视区高度
                var initHeight = document.documentElement.clientHeight
                window.onresize = function() {
                  // 获取键盘弹出后的屏幕的可视区高度
                  var currentHeight = document.documentElement.clientHeight
                  if (initHeight > currentHeight) {
                    // 弹出键盘的高度 = 初始化可视区高度 - 窗口发生改变后的屏幕可视区高度
                    var keyboardHeight = initHeight - currentHeight
                    //  赋值给所有元素外的大盒子样式; 等于弹出键盘的高度; (( 样式赋值给外面的大盒子很重要 ))
                    document.getElementById('count').style.marginTop = '-' + keyboardHeight + 'px'
                  } else {
                    // 如果条件不成立,则说明已经失焦,样式回到正常
                    document.getElementById('count').style.marginTop = '0px'
                  }
                }
              }
            } else {
              // ios 系统 (失去焦点时滚动距离)
              document.addEventListener('blur', (e) => {
                document.body && (document.body.scrollTop = 0)
                let currentPosition
                currentPosition = document.documentElement.scrollTop || document.body.scrollTop
                window.scrollTo(0, currentPosition)
              }, true)
            }
          },
    

    每个人碰到的场景不同 , 如果以上代码, 思路, 没有帮到你 , 可以把问题分享出来 , 大家相互学习 , 一起解决 !!!

    展开全文
  • 善用:jq对象.scrollIntoViewIfNeeded() 和 jq对象.scrollIntoView() 换种布局 ... if (winHeight - thisHeight > 50) { //当软键盘弹出,在这里面操作 } else { //当软键盘收起,在此处操作 } }); }
    <script type="text/javascript">
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        
        $('input').focus(function () { //输入框得到焦点事件
            var sender = this; //sender = 获得焦点的控件
            if (isAndroid) {
                setTimeout(function() {
                    sender.scrollIntoViewIfNeeded(true);
                    sender.scrollIntoView(true);
                }, 500) //为什么要加setTimeout延时0.5秒呢,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了
            }
        })
        
    </script>
    
    
    善用:jq对象.scrollIntoViewIfNeeded()
    和 jq对象.scrollIntoView()
    换种布局 https://www.cnblogs.com/ljx20180807/p/9837748.html
    .MainBox { position: relative; height: 100%; }
    .ContentBox { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch //为了使滚动流畅,sectionA 添加属性 }
    .inputBox { position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; } 
    
    
        //键盘收起
        if (isiOS) { $('input').blur(function () { }) //IOS要用失去焦点事件
        if (isAndroid) {
            var winHeight = $(window).height();   //获取当前页面高度
    
            $(window).resize(function () {
                var thisHeight = $(this).height();
                if (winHeight - thisHeight > 50) {
    
                    //当软键盘弹出,在这里面操作
    
                } else {
    
                    //当软键盘收起,在此处操作
                }
            });
        }
    
    
    
    展开全文
  • 关于手机键盘挡住输入框的问题

    千次阅读 2017-12-06 15:03:36
    项目结构大概是这个样子: 在主页面有5个浮动窗口的表单,因为是浮动窗口,不知道为什么页面不会自动上浮,想了很就,也试过很多方法,但是都不是很理想。 于是,只能用最笨的方法。。。。设置 margin-top这个属性...

    项目结构大概是这个样子:

    在主页面有5个浮动窗口的表单,因为是浮动窗口,不知道为什么页面不会自动上浮,想了很就,也试过很多方法,但是都不是很理想。

    于是,只能用最笨的方法。。。。设置 margin-top这个属性

    原理是, 当获取文本框光标时,设置这个属性, 失去焦点时,在删除这个属性。(我想没有比我更笨的办法了,唯一的优点我想就是简单吧)


    于是跟着想法来 

    先获取当前页面的margin和当前滚动条的margin 相加

           var top = document.getElementById('margin').offsetTop+document.body.scrollTop;


    然后 给这个页面的marginTop属性赋 一个 负值,然后在减去 获得的top(大概位置差不多)
         document.getElementById("margin").style.marginTop = (-200 - top) + "px";


    上面时获取焦点事件 

    然后就是 失去焦点事件

    $("#margin").removeAttr("style");  

    ok , 最笨的方法了 ,希望能帮到大家

    展开全文
  • 安卓手机聚焦键盘挡住输入框 问题描述 部分安卓手机聚焦,键盘会挡住输入框。以下是解决方案; 解决方案 <input class="item-input" v-model="cusTel" type="tel" @focus="focusScroll($event)" @input=...

    安卓手机聚焦键盘挡住输入框

    问题描述

    部分安卓手机聚焦,键盘会挡住输入框。以下是解决方案;

    解决方案

    <input class="item-input"
       v-model="cusTel"
       type="tel"
       @focus="focusScroll($event)"
       @input="limitInput($event, 'cusTel', 11)"
       placeholder="请输入您的手机号">
    
    // 输入框聚焦滑动
    focusScroll(e) {
        let u = navigator.userAgent;
        if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
            setTimeout(() => {
                e.target.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
            }, 300)
        }
    },
    

    知识点:scrollIntoView 的运用。 scrollIntoView 的直通车

    展开全文
  • 手机输入时键盘挡住输入框问题 点击input输入框键盘弹起,页面最底部出现在键盘上面 实现: let target=this; setTimeout(()=>{ target.scrollIntoView(true); },100) 当输入完成,input框失去焦点时,页面...
  • 键盘挡住输入框解决办法

    千次阅读 2019-07-19 15:39:34
     为什么要随时监测屏幕大小,这是因为我们在手机端的时候,常常会遇到这样的问题:当点击输入框的时候,手机键盘就会自动浮现,它会使得页面的可视示高度(document.body.clientHeight)发生变化。而我们的输入框...
  • 登录页有时候为了做的漂亮底部会有些图片或者其他样式,在大屏或者其他分辨率较高的手机端正常的情况下,会碰到手机分辨率低或其他小屏安卓机键盘挡住输入框的情况。常规解决方案有js获取高度做判断啊,input获取...
  • 最近做混合app开发的时候,遇到一个很头疼的问题,在ios上,输入文本时,软键盘挡住输入框,如下图。 当发完一条消息后,软键盘会弹起挡住输入框,发第二条消息的时候,就不得不先收起软键盘,用户体验很差。而...
  • 就有可能把用户名和密码框放在手机屏幕的中间或底部,这样当软键盘弹出的时候,就有可能挡住输入框(往往用户输完用户名和密码还要按返回键盘才能登录), 这样用户体验是不好的,该demo是一个解决该问题相对比较好的...
  • 相信大家写移动端肯定遇到过输入框手机键盘挡住的问题,我自己也百度了很多办法,最开始是改变输入框的fixed定位为absolute定位,并不能实现效果,然后尝试用了以下方法: // css .mainBox{ height:100vh; ...
  • 在安卓手机端经常会出现一个问题,就说软键盘弹出的时候,将输入框挡住的问题。 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText。 对于这种...
  •  这个页面刚好一屏幕大小,所以没有滚动条,因为“保存”键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了。苹果手机天然不会喔,苹果...
  • 就有可能把用户名和密码框放在手机屏幕的中间或底部,这样当软键盘弹出的时候,就有可能挡住输入框(往往用户输完用户名和密码还要按返回键盘才能登录), 这样用户体验是不好的,该demo是一个解决该问题相对比较好的...
  • 安卓手机键盘挡住输入框解决方法
  • 我们在开发Android应用中,登录和注册界面是少不了的,往往在做登录注册的时候如果给界面加一个LOGO,就有可能把用户名和密码框放在手机屏幕的中间或底部,这样当软键盘弹出的时候,就有可能挡住输入框(往往用户输完...
  • 1.写个js即可(对于vue项目,将js写在... // 处理安卓手机输入法遮挡输入框问题 if ((/Android/gi).test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement....
  • 移动端输入框手机键盘挡住

    千次阅读 2017-01-19 09:45:38
    在没有定位的情况下,解决输入框手机键盘挡住时,可以参考: var loaclHeight = $("section").height();//获取可视宽度 $("input,textarea").focus(function() { var keyboardHeight = localHeight - $(...
  • $("input").focus(function () { var num = $(this).offset().top; $("html,body").animate({scrollTop: num}, 800);}); //关键代码 $("input").focus(function () { var num = $(this).of...
  • 这个问题是因为input在获取焦点时e.detail.height...通过小程序开调试看打印发现,当键盘挡住输入框时,获取的键盘高度为216px,正常时键盘高度为258px,相差了42px。 解决方法: &lt;input bindfocus="i...
  • //浏览器当前的高度 var oHeight = $(document).height(); $(window).resize(function(){ if( $(document).height() &lt; oHeight){ $("#footer").css(“position”,“static”);...
  • //有效解决安卓手机键盘弹出输入框挡住问题  if (/Android/gi.test(navigator.userAgent)) {//浏览器属性为安卓时生效  window.addEventListener('resize', function () {//屏幕大小发生变化(调出虚拟键盘
  • 针对手机端 ios 键盘输入框按钮挡住 var hrt = $(window).height(); //获取当前可视区域的高度存到hrt的变量里。 console.log(hrt); window.onload = function () { //在页面整体加载完毕时 $(’.content’)....
  • 我们在开发Android应用中,登录和注册界面是少不了的,往往在做登录注册的时候如果给界面加一个LOGO,就有可能把用户名和密码框放在手机屏幕的中间或底部,这样当软键盘弹出的时候,就有可能挡住输入框(往往用户输完...
  • 思想是:注册登录的高度自适应,在页面加载完成时,设定...//软键盘 $(function(){ //本来body设置100%,防止body变化,设置body高度为可视区域高度; $('body,html').height(window.innerHeight); // 对手机...
  • 我们在开发Android应用中,登录和注册界面是少不了的,往往在做登录注册的时候如果给界面加一个LOGO,就有可能把用户名和密码框放在手机屏幕的中间或底部,这样当软键盘弹出的时候,就有可能挡住输入框(往往用户输完...
  • 只需要两步: 1. 在WebView包裹一层LinearLayout; 2. 调用下面的代码 3. 如果还未解决,可以在界面的根布局加一句android:fitsSystemWindows=”true”@Override protected void onCreate(Bundle ...

空空如也

空空如也

1 2 3 4 5
收藏数 86
精华内容 34
关键字:

手机键盘挡住输入框