当前位置: 首页 > news >正文

移动端唤起键盘时取消position:fixed定位

当在移动端按钮position:fixed;底部bottom:0;

固定定位后,当唤起键盘输入数据时就会出现很头疼的问题:

固定在底部的按钮会被系统自带的键盘挤上去,占用输入框位置;

如图:

clipboard.png

怎么样才能让按钮固定底部,后面找到了两种方式。

HTML

<div class="submit">
     <button type="button" class="btn">提交信息</button>
</div>

css

.submit {
    display: flex;
    width: 100%;
    justify-content: center;
    position: fixed;
    bottom: 0;
}

1.第一种

通过输入框input获取焦点/移除焦点 来控制按钮的position样式;

js

$("input,textarea").focus(function(){
      $(".submit").css("position","static");
}).blur(function(){
   $(".submit").css("position","fixed");            
});

效果是实现了,但是后面发现一个问题,如图:

clipboard.png

会发现按键没有显示完整。

2.第二种

需要了解 resize()

通过resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。

js

var windheight = $(window).height();  /*未唤起键盘时当前窗口高度*/
        
$(window).resize(function(){
   var docheight = $(window).height();  /*唤起键盘时当前窗口高度*/        
   if(docheight < windheight){            /*当唤起键盘高度小于未唤起键盘高度时执行*/
      $(".submit").css("position","static");
   }else{
      $(".submit").css("position","fixed");
   }           
});

运行后显示效果

唤起时:

clipboard.png

取消时:

clipboard.png

这样就完美解决了类似键盘问题,当然这种方式也可以运用到其他场景当中。

前端菜鸟,多多指教

相关文章:

  • 磁盘爆满
  • 29、Java并发性和多线程-非阻塞算法
  • 吕佳(帮别人名字作诗)
  • 如何弹出固定大小及内容的网页窗口
  • jvm 各个区含义
  • 文章推荐
  • Spark HA on yarn 最简易安装。
  • jade 入门教程
  • SICP-1.5-控制结构
  • C++面试题集(最全的C\C++试题集和答案)
  • java多态的理解
  • [导入]创建一个存储过程,根据系部编号查出男生、女生人数
  • 安装OpenResty开发环境
  • Vc中的文件路径问题
  • Servlet Filter
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • docker容器内的网络抓包
  • ES2017异步函数现已正式可用
  • es6(二):字符串的扩展
  • IOS评论框不贴底(ios12新bug)
  • Java基本数据类型之Number
  • Nodejs和JavaWeb协助开发
  • Spring框架之我见(三)——IOC、AOP
  • use Google search engine
  • Webpack 4 学习01(基础配置)
  • 闭包,sync使用细节
  • 让你成为前端,后端或全栈开发程序员的进阶指南,一门学到老的技术
  • 微信开放平台全网发布【失败】的几点排查方法
  • 微信小程序开发问题汇总
  • 原创:新手布局福音!微信小程序使用flex的一些基础样式属性(一)
  • ionic异常记录
  • 移动端高清、多屏适配方案
  • ​云纳万物 · 数皆有言|2021 七牛云战略发布会启幕,邀您赴约
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • #NOIP 2014#Day.2 T3 解方程
  • (42)STM32——LCD显示屏实验笔记
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (附源码)计算机毕业设计ssm高校《大学语文》课程作业在线管理系统
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)jdk与jre的区别
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转)大型网站架构演变和知识体系
  • (转载)Linux 多线程条件变量同步
  • (轉貼) 資訊相關科系畢業的學生,未來會是什麼樣子?(Misc)
  • ../depcomp: line 571: exec: g++: not found
  • .equal()和==的区别 怎样判断字符串为空问题: Illegal invoke-super to void nio.file.AccessDeniedException
  • .NET Core 2.1路线图
  • .net 受管制代码
  • .NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .NET大文件上传知识整理
  • .net通用权限框架B/S (三)--MODEL层(2)