html 输入框键盘遮挡,解决输入框被键盘挡住的问题
①:上面的效果图随意摆放的input输入框唤起键盘的对齐问题,下面上代码:
*{margin:0;padding:0;}
html,body{width:100%}
.box{width:100%}
.box ul li{width:100%;height:80px;line-height:80px;margin-bottom:5px;background:lightblue;text-align:center;}
.inputBox{width:100%;height:60px;line-height:60px;background:lightblue;text-align:center;}
.input1{width:100%;height:80px;line-height:80px;font-size:20px;border:none;background:gainsboro;}
.input2{width:100%;height:60px;line-height:60px;font-size:20px;border:none;background:gainsboro;}
- 0
- 1
- 2
- 3
- 5
- 6
- 7
- 8
- 9
- 0
- 1
- 2
- 3
- 4
- 5
$(document).ready(function() {//如果此处增加一个alert弹窗,IOS上面就可以自动对齐,如果没有则不会自动对齐加个延迟的定时器尽然也可以达到同样的效果,alert和延迟定时器有什么关系吗?
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终端
var scrollTop;
$(".input1").focus(function() {
scrollTop=document.body.scrollTop; //获取焦点时记录一下input的当前位置,以便失去焦点的时候重新回到原来的位置;或者$(document).scrollTop()也可以setTimeout(function() { //如果不用定时器和alert之类的,不会执行,
if(isiOS){ //这里要判断IOS和安卓,因为他们执行的是不同的代码
document.body.scrollTop= ($(".input1").offset().top-98); //这个在IOS上面是好的,$(".class").offset().top获取页面到顶部的距离,后面减的是input元素框的高度,}
if(isAndroid){
document.body.scrollTop= ($(".input1").offset().top-180); //这个在安卓上是好的,如果input输入框在页面底部就不用管没事,如果input输入框在页面中就需要上面的代码,才可以,$(".class").offset().top获取页面到顶部的距离, 后面减的是input元素框的高度,但是安卓的关闭键盘时输入框没有失去焦点,导致无法回到原来的位置,只能点击其他地方才会突然回到原来的位置。下面的失去焦点回到原来位置的代码不知道还有没有必要?
}
},40);
}).blur(function() {
setTimeout(function() {
document.body.scrollTop=scrollTop;
},40);
})
});
html 输入框键盘遮挡,解决输入框被键盘挡住的问题相关推荐
- android,键盘遮挡了输入框,完美解决android键盘遮挡问题
登录界面经常会出现输入框被键盘遮挡的情况,这里处理的方式是当软件盘出现的时候在界面的最底部空出键盘的高度.需要代码和xml布局一起修改来实现. 1.xml布局通过ScrollView包裹住内容,内容使 ...
- js手机键盘遮挡_iphone手机微信页面软键盘遮挡input输入框解决方法
现象描述:iphone手机微信页面,用position: fixed;定位的input或textarea输入框,在获取输入焦点时,会被弹出的输入法软键盘遮挡,导致用户无法看到输入框,效果如图: 简化测 ...
- 解决html中手机键盘遮挡input输入框
多读多写多记录,多学多练多思考. ---------- Banana.Banuit(香柚帮) 解决方法: scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素,以便在当 ...
- flutter dialog中软键盘遮挡解决冲突
在dialog中代码软键盘冲突的解决方案; 主要价格这行代码: padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.b ...
- flutter - 使用 SingleChildScrollView() 解决键盘遮挡输入框的问题
写好了,感觉可好 点击输入框,输入内容时发现如下,键盘遮挡了输入框 使用 SingleChildScrollView 解决遮挡问题, 就是让它滚动起来 直接使用 SingleChildScrollVi ...
- 《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化
以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看 1.<React-Native系列>33. 键盘遮挡问题处理 2.<Rea ...
- React-native键盘遮挡输入框问题的解决
2016年10月25日更新: 现在有一个更准确一点的做法是用一个View包裹住TextInput,然后通过该View的onLayout方法获取该输入框的y轴位置,再减去一个适当的高度去处理scroll ...
- h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法 参考文章: (1)h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法 (2)https://www.cnblogs.co ...
- 安卓webview中键盘遮挡输入框如何解决
关键词:安卓原生.unity.webview.键盘遮挡输入框.沉浸式状态栏. 首先是最简单的情况,当我们app有一个比较靠下的输入框时,唤出键盘会遮挡住输入框. 这种情况的对应方式很简单,只需要找到安 ...
最新文章
- api.dll自己的理解
- html取 输入框中的值,jquery获取input输入框中的值
- 快速排序 ——双游标、单游标实现
- Linux系统中的防火墙的实现:iptables/netfilter
- 从程序设计角度看B/S C/S到底有什么不同???
- gradle打包 执行类方法
- SAP Analytics Cloud和SAP Cloud for Customer的集成
- 团队项目计划BACKLOG
- oracle 拉文件进ubuntu,ubuntu 18-20 安装oracle java 打开jnlp文件
- 大话设计模式--抽象工厂模式 Abstract Factory -- C++实现实例
- SpringBoot入门教程(十四)导出Excel
- Understanding Unix/Linux Programming-ls指令练习二
- 高速PCB设计注意事项
- 装系统缺少硬盘驱动_缺少操作系统-向我学习,请在今年备份您的硬盘!
- 小莫取色精灵 使用教程_MQ
- 基金,最适合普遍投资者的工具
- 群论中的拉格朗日定理(子群的阶必然能整除群阶)
- 利用Q-learning解决Cliff-walking问题
- 计算机应用助理师证,计算机应用助理工程师考的简单吗?吗?
- FigDraw 22. SCI文章中绘图之核密度及山峦图 (ggridges)
热门文章
- 【C 语言基础】C 世界函数的故事,今天带你详细了解各组件原理
- 用生成模型来做图像恢复的介绍和回顾:上下文编码器
- mysql 查询一个订单下多个商品_如何商品信息多个sql查询搜索
- 在html中 给表格添加行,在HTML代码中,给表格添加行的标记是。
- 解决了一次模块间TTL串口不能通讯的问题
- 20+Pandas文本数据处理,干货多多
- JS逆向之常见编码和混淆加密方式(二)
- 大学计算机教学内容体系,大学计算机教学内容体系建设与改革论文
- 淘宝刷信用教程曝光:“一钻”售价仅为250元
- 新西兰android时区代码,Android北京时间转换为新西兰时间