专栏首页coding个人笔记Input被软键盘遮住

Input被软键盘遮住

在业务开发过程中,移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。

网上也有很多解决办法,比如计算高度然后scroll到某个地方、调用scrollIntoView,、scrollIntoViewIfNeeded、监听window的resize方法、定位fixed。方法有很多。

这边提一下踩过的坑,如果是scrollIntoView和scrollIntoViewIfNeeded,在移动端会有不兼容的情况。如果是计算scroll,在定位fixed弹窗上滚动不了。这是本人遇见的情况,可能有解决方法,但是没去研究。

最简单的方法是使用定位。在聚焦的时候给这个输入框添加定位fixed,然后设置bottom 0。因为软键盘弹出之后对于可视窗口来说是要扣除软键盘的高度。这个方法很简单,但是会出现一点小问题,那就是安卓手机使用自带返回键的时候input还是聚焦状态。

同样的,也是样式定位,但是监听window的resize:

$(window).resize(function() {
 });

因为软键盘弹出之后,可视窗口大小就变了,会触发resize事件,然后在resize里面判断。先判断当前可视窗口是否小于原来的可视窗口(初始化页面的时候就初始化一个原来可视窗口的高度),然后判断当前input是否是聚焦状态,

document.getElementById('detail') == document.activeElement

detail是不希望遮住的input输入框ID。如果两个条件成立:

$('.address-detail').css({position: 'fixed', bottom: 0});

否则:

$('.address-detail').css({position: ''});

这个方法简单是简单,但是不够完善,因为我们输入框在上面的可以不需要去操作什么,如果有很多歌input需要使用这个方法,那么就要循环去判断,不过暂时没遇见很多歌input元素使用的情况,所以没去研究。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 雅虎军规第三天

    页面含有重复的脚本文件会影响性能,因为重复脚本会创建不必要的HTTP请求,执行无用的JavaScript代码,而影响页面性能。即使脚本是可缓存的,在用户重新加载...

    wade
  • Vuex使用场景

    最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex?于是搜集了一些资料,但...

    wade
  • Vue父子组件通信

    Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

    wade
  • 速读原著-Android应用开发入门教程(HelloActivity的编译结构)

    在 Android 的 SDK 环境开发中,HelloActivity 工程经过编译后,SDK 环境下开发生成的所有目标文件均在当前工程目录中,包含了 asse...

    cwl_java
  • java编译通过,为什么运行却提示找不到或无法加载主类?

    landv
  • 纸上谈兵: AVL树

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢! 二叉搜索树的深度与搜索效率 我们在树, 二...

    Vamei
  • 雷达LFM信号分析

    是信号s(t)的复包络。由傅立叶变换性质,S(t)与s(t)具有相同的幅频特性,只是中心频率不同而以,因此,MATLAB仿真时,只需考虑S(t)。以下MATLA...

    数字芯片社区
  • 百度万亿流量转发引擎BFE VS Nginx

    BFE(Baidu Front End,百度统一前端)是百度的统一七层流量转发平台。BFE平台目前已接入百度大部分流量,每日转发请求接近1万亿,峰值QPS超过1...

    后端技术探索
  • eclipse中执行程序显示找不到主类

    eclipse中执行程序显示找不到主类 这种情况一般出现在工程中已编译有class文件的java文件,而后面新建的java则不会出现问题。这种情况说明工程bin...

    闵开慧
  • 菜鸟 学注册机编写之 “RSA”

    选取两个别人不知道的大素数p, q. 公共模n = p*q 欧拉值φ(n) = (p-1)(q-1) 选取公匙(加密匙) e , 条件是1< e <φ(n...

    我是小三

扫码关注云+社区

领取腾讯云代金券