js解决软键盘遮挡输入框的问题分享

经验须知

弹出软键盘时：

ios端$(‘body').scrollTop()会改变

android端$(window).height()会改变

拉起键盘不是一瞬间，而是有一个缓动过程

问题重现

ios端，经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法，如：百度输入法)，如图：

问题解决

我们只需要在输入框聚焦之后，开启一个定时器，执行$(‘body').scrollTop(1000000)，这样由于整个body滚动到了最下面，输入框自然就看见了，具体请查看以下示例

示例源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>demo</title>
  <script src="../js/jquery-1.11.3.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body, html {
      width: 100%;
      height: 100%;
    }
    .bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      font-size: 0;
    }
    input {
      font-size: 14px;
      box-sizing: border-box;
      width: 50%;
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <div class="bottom">
    <input class="aInput" type="text" placeholder="ios聚焦后会被输入法遮挡" />
    <input class="bInput" type="text" placeholder="ios聚焦后不会被输入法遮挡" />
  </div>
</body>
<script>
  $(function() {
    // 解决输入法遮挡
    var timer = null;
    $('.bInput').on('focus', function() {
      clearInterval(timer);
      var index = 0;
      timer = setInterval(function() {
        if(index>5) {
          $('body').scrollTop(1000000);
          clearInterval(timer);
        }
        index++;
      }, 50)
    })
  });

</script>
</html>

以上这篇js解决软键盘遮挡输入框的问题分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

    移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

    由于公司需求,需要做一个实时对话的聊天功能.遇到各种小坑就不多说了,下面就记录一下遇到最坑的一个问题.. 页面布局写完后,在安卓和苹果手机测试了一下,问题来了!!!在安卓手机中布局完美展示(这很好),但在苹果手机下,经常点击输入框键盘会把输入框挡住. 如下图显示: 图一 图二 图三 (图一和图二都是有问题的,图三才是想要的效果.) 每次键盘遮挡住输入框之后,必须要手动向上滑动一下屏幕才显示出来,这体验效果就很不好了吧.然后自己就尝试了各种方法,什么定时器.绝对定位.固定定位.计算屏幕高度再定位等

  • Android软键盘挡住输入框的终极解决方案

    Android软键盘挡住输入框的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即

  • IOS 键盘挡住输入框的问题解决办法

    IOS 键盘挡住输入框的问题解决办法 在iOS开发发现一个问题,有时输入框位于低出时,当编辑输入时,弹出的键盘会挡住输入框,令用户看不清楚实时的输入情况,使界面交互极度不友好. 经过查资料终于解决了这个问题. 解决思路: 1. 输入框监听UIControlEventEditingDidBegin事件,当用户开始输入时,将整个view上移. 2. 输入框监听UIControlEventEditingDidEnd事件,当用户结束输入时,将整个view下移,恢复到原位置. 输入框监听事件: [text

  • 手机软键盘弹出时影响布局的解决方法

    移动端软键盘弹出时影响布局该如何解决 1)前段时间作的移动端页面,因为高度只有1页所以用了height:100%;width:100%; ios下点击输入框弹出软键盘时,布局没有大影响. 当输入框可能被软键盘压到时,在一部分安卓下却出了问题,华为自带浏览器和UC会有布局上的问题. 原因可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').height($('bo

  • Android EditText被软键盘遮盖的处理方法

    这两天android app新增了透明栏效果,结果发现键盘弹起后会遮盖屏幕底部的EditText,没有像想象中的调整窗口大小,并滚动ScrollView,将EditText显示在键盘上方.之前也遇到过类似问题,所以解决后就干脆写把所有关于EditText和键盘之间问题和解决思路都记录一下,以便以后查阅. 一.在5.0以前,如果EditText设置了gravity="center|right"其中之一且同时设置了singleLine="true",就会导致屏幕底部的E

  • js解决软键盘遮挡输入框的问题分享

    js解决软键盘遮挡输入框的问题分享

    经验须知 弹出软键盘时: ios端$('body').scrollTop()会改变 android端$(window).height()会改变 拉起键盘不是一瞬间,而是有一个缓动过程 问题重现 ios端,经常会出现输入法遮挡输入框的问题(特别是那种有一个白色顶部的输入法,如:百度输入法),如图: 问题解决 我们只需要在输入框聚焦之后,开启一个定时器,执行$('body').scrollTop(1000000),这样由于整个body滚动到了最下面,输入框自然就看见了,具体请查看以下示例 示例源码

  • Android WebView软键盘遮挡输入框方案详解

    Android WebView软键盘遮挡输入框方案详解

    目录 背景 纪实 方案 实现 总结 背景 笔者在使用 WebView 加载含有输入框的 H5 页面时,点击输入框后,输入框会被软键盘遮挡住,无法看到输入的内容,这很影响用户体验. 笔者想着这种业务场景比较常见,遂上网搜索一番,果不其然,有不少同志遇到这个问题,想来这个问题很好解决了.笔者一一尝试了同志们提供的解决方案,结果要不是没有作用,要不是效果不太满意,只好自己另辟蹊径了. 注:在笔者的业务场景中,App是全屏的,即没有顶部的系统栏,也没有底部的导航栏,所以笔者的解决方案,可能不适用于其他场

  • Android优雅的方式解决软键盘遮挡按钮问题

    Android优雅的方式解决软键盘遮挡按钮问题

    前言 比如在进行登录的操作中,用户输入完密码之后,肯定是想直接点击登录按钮的.返回键隐藏软键盘这样的体验肯定很糟糕,程序员,遇到问题解决问题. 实现1 xml <ScrollView android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="wrap_content" android:fadingEdge="non

  • 5种方法完美解决android软键盘挡住输入框方法详解

    5种方法完美解决android软键盘挡住输入框方法详解

    在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好.像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常满足不了需求.同时如果输入框特别多的情况下,点击输入时,当前输入框没被挡住,但是当前输入框下面的输入框却无法获取焦点,必须先把键盘收起,再去获取下面输入框焦点,这样用户体验也非常不好,那有什么办法呢?  系统的adjustResize和adjustPan有什么区别,他们使

  • Android软键盘遮挡的四种完美解决方案

    Android软键盘遮挡的四种完美解决方案

    一.问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 二.简单解决方案 方法一 在你的activity中的oncreate中setContentView之前写上这个代码 getWindow().setSoftInputMode(WindowManage

  • Js之软键盘实现(js源码)

    Js之软键盘实现(js源码)

    鉴于安全性的考虑,不少网站在登录输入密码时都采用了软键盘,避免一些键盘记录工具和木马对击键的捕捉.项目中也有这个需求,就分享给大家了,贴个效果图上来..有兴趣的朋友可以收藏....如果觉得功能有点庞大,只需要数字小键盘的朋友,可参考代码精简.下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘:http://www.cnblogs.com/Files/sccxszy/smallSoftkey.rar小键盘: 效果还原:Default

  • Android屏蔽软键盘自动弹出的解决方案

    Android屏蔽软键盘自动弹出的解决方案

    问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键盘遮挡了,大大降低了用户操作体验,这就是开发中非常常见的软键盘遮挡的问题,该如何解决? 简单解决方案 方法一: 在你的activity中的oncreate中setContentView之前写上这个代码 getWindow().setSoftInputMode(WindowManager.L

  • 使用Android实现一个悬浮在软键盘上的输入栏

    目录 前言 悬浮栏 横屏时软键盘全屏 监听软键盘(该方法不可靠,废弃,下面有靠谱的) 靠谱的监听软键盘的方法 终极悬浮方式 如果变小了 如果变大了 最终代码 总结 前言 我们要实现一个悬浮在软键盘上的输入栏(即一个悬浮栏),过程中遇到了很多问题,查阅了一些网上的文章,结果发现不少是错误的,走了一些弯路,这里就一一记录一下. 悬浮栏 实现悬浮栏很简单 chatInputPanel.setVisibility(View.VISIBLE); chatInputEt.setFocusable(true)

  • jquery比较简洁的软键盘特效实现方法

    jquery比较简洁的软键盘特效实现方法

    本文实例讲述了jquery比较简洁的软键盘特效实现方法.分享给大家供大家参考.具体实现方法如下: 运行效果图如下: 1. html主要部分如下: 复制代码 代码如下: <div id="container">  <textarea id="write" rows="6" cols="60"></textarea>  <ul id="keyboard">   &

随机推荐