移动端解决input被输入法挡住的问题

有过移动端web开发经验的人应该都会遇到这个问题,一个input在页面最底部或者偏下的位置,输入时由于输入法的弹出,在部分浏览器下由于不会自动计算window的高度,导致input被输入法挡住。
本文的解决方式是利用scrollTop来解决,在input获取焦点后,动态地设置body的高度并设置scrollTop到指定位置,这样可以保证input会滚动到输入法上方,失去焦点后再恢复原来的位置。
有两种情况:
1、input在页面最底部,后面没有其他元素,这种情况我们可以获取窗口的高度减去input的高度再减去一些空余高度,可以得到应该滚动的高度,var scrollHeight = $(window).height() - $(‘input‘).height() - 40,这种情况下这么计算很合适,没什么问题。
2、然而有时候input不是在最底部,之后还有其他元素,如果按照上一种方式,当你滚动到input在屏幕中间或者上部的时候,由于滚动距离还是上一种方式获取的,这个时候滚动距离会大于应该滚动的距离,导致input直接到页面上方被隐藏了。
     这个时候我们换种思路,只要想办法获取input到窗口的上边框的距离即可,其他代码都一样,那么可以这么写,var scrollHeight = $(‘input‘).offset().top - $body.scrollTop() - 40,即input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度。

完整代码:在线预览1 在线预览2

<div style="height: 1000px;"></div>
  <input type="text" style="width: 100%;height: 40px; ">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var scrollHeight, //应该滚动的距离
      $body = $(‘body‘)
    $(‘input‘).on(‘focus‘, function () {
      //input距离页面顶部的高度减body滚动的高度获得input距离窗口上方的高度,40表示距离顶部留点空隙
      scrollHeight = $(‘input‘).offset().top - $body.scrollTop() - 40
      console.log(scrollHeight)
      //先修改body的高度,在滚动到对应的位置
      $body.height($body.height() + scrollHeight).animate({scrollTop: $body.scrollTop() + scrollHeight}, 300);
    }).on(‘blur‘, function () {
      //input失去焦点后恢复到原来的位置
      $body.animate({height: $body.height() - scrollHeight, scrollTop: $body.scrollTop() - scrollHeight}, 300)
    })
  </script>
时间: 2024-11-05 07:39:19

移动端解决input被输入法挡住的问题的相关文章

解决移动端输入法挡住输入框的办法

做过hybrid app的朋友都会使用这样过这样的开发模式,app是原生的,里面的内容是移动web.以安卓为例,安卓app里面内容会使用一个webview控件来加载移动web,webview控件设置了全屏.那么问题来了,假如是一个表单页面,里面有很多的输入框,点击最顶部的输入框的时候,移动端的输入法就会挡住最底部的输入框,无法看到输入框里面的内容. 如何解决,请看一下代码: <!DOCTYPE html> <html> <head> <meta charset=&

input textarea 获取焦点挡住输入法 解决办法

// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug // 相关 issue: https://github.com/weui/weui/issues/15 // 解决方法: // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题 // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-

Android 中解决输入法挡住输入框的问题

android 中解决输入法挡住输入框的问题 大家在布局时候,有时候会发现输入框被挡住一部分,能完全显示出来,但是系统自带短信界面可以完全漂浮在软键盘之上,看了一下短信源码,修改一下输入模式就可以了,源码如下代码方式: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN); 也可以简

Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug

DOM的滚动 DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动.这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用. 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐.-------目前各浏览器均支持 2.scrollIntoVie

解决input输入光标不一致粗细!

今天有人问了谷歌和火狐下input输入框中的光标大小显示不一致,之前都没遇到过这~把人家的解决方法转过来先~~~以前在项目里碰到过一个问题input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高,但当开始输入文字时,光标又变得跟文字一样高, chrome下光标跟input的height一样高, 而IE下光标跟文字的大小一致. 一直没弄明白为什么这样子,今

Mac端解决:Can&#39;t connect to local MySQL server through socket &#39;/tmp/mysql.sock&#39; (2)

安装mysql但是从来没启动过,今天一启动就报错: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 其实是mysql服务没起来... localhost:~ miaoying$ mysql.server start Starting MySQL ... SUCCESS! 然后再去sudo mysql就行了 Mac端解决:Can't connect to local MySQL server thro

移动端输入框被手机键盘挡住

在没有定位的情况下,解决输入框被手机键盘挡住时,可以参考: var loaclHeight = $("section").height();//获取可视宽度 $("input,textarea").focus(function() { var keyboardHeight = localHeight - $("section").height();//获取键盘的高度 var keyboardY = localHeight - keyboardHe

解决input获取焦点时底部菜单被顶上来问题

1 <div class="search-box"> 2 3 <input class="search-input" type="text" placeholder="请输入名称"> 4 </div> 5 <!--底部--> 6 <div id="mini_nav" class="nav bt-nav"> 7 <div&g

解决input中智能提示框onblur与onclick冲突的问题

背景: 制作一个类似百度输入法的智能提示框, 其中当关键词输入进来时,会有智能提示展开,实际需求是当点击智能提示框的汉字时,输入框中自动补全并关闭智能提示, 当点击其他区域时,智能提示框自动隐藏,如下所示: 分析:点击用onclick事件触发获取的值,然后点击外框用失去焦点的方式解决 但实际出现效果是: 如果添加了失去焦点的方法,点击提示文本的时候,文字也会因为输入框失去焦点而被隐藏,以至于文字无法被选中上去: 问题出现时用方法如下: //oA是智能提示框的列表中的单个文字 oA.onclick