zoukankan      html  css  js  c++  java
  • 移动端input获取焦点弹出输入框时影响fixed布局的问题

    最近在做移动端项目的时候遇到的一个问题,在点击input获取焦点弹出输入框进行输入后,再次点击input输入框时,意外的事情发生了,

    页面突然跳转到确定按钮跳转的页面了,刚开始以为是点击穿透导致的,朝着这个方向一直没有得到解决。。。

    经过反复研究,发现第二次点击input 时,上面有一个隐形的按钮,这是怎么回事,确定按钮怎么就跑到上面去了呢,原来是由于最外层

    使用了fixed布局,而第一次点击input获取焦点时,移动端默认弹出的输入框会将fixed布局的元素顶上去。

    解决办法:

    1、如果使用的元素不是必须使用fixed布局的话可以不使用;

    2、元素必须使用fixed布局时,在input获得焦点时将元素的position设置为static,失去焦点时再将元素的position设置为fixed;

    $('#phone').bind('focus',function(){
        $('.bottom_fix').css('position','static');
    }).bind('blur',function(){
            $('.bottom_fix').css({'position':'fixed','bottom':'0'});
    });
    

      

  • 相关阅读:
    第一周、学习嵌入式
    centos7及xfce桌面环境安装,远程工具配置使用方法
    第一次作业
    2018下C语言基础课第1次作业
    第二次作业
    第一次作业
    第0次作业
    博客园第五次作业
    博客园第四次作业
    博客园第三次作业
  • 原文地址:https://www.cnblogs.com/yanganglanyu/p/10444094.html
Copyright © 2011-2022 走看看