当界面元素靠下时候的时候,input输入框会被系统的键盘遮挡。

我们可以让界面向上移动一定距离去避免遮挡。

  $('#money').click(function(){
setTimeout(function(){
$(this).scrollIntoView(); // 参数可以是true, false, 空参数
}, 300);
})

基于jquery写的事件。

首先绑定触发元素(input)框,scrollIntoView(alignWithTop)  属性滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。

click事件触发的时候,输入框会向上移动,移动的范围是界面可见的程度。后面参数是延时操作的时间。

单位是毫秒。

移动端,input输入框被手机输入法解决方案的更多相关文章

  1. 移动端input“输入框”常见问题及解决方法

    转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

  2. 移动端input输入框把页面顶起, 收起键盘页面复原不了问题

    我相信大家平时也会遇到这种问题, 移动端 input 或者 textarea获取光标, 整个页面被顶起来, 键盘收起, 页面不复原的问题 ====>>>>  我这边提供两种解决 ...

  3. IOS11 底部输入框被手机输入法遮住

    前言: 最近在做一个评论的功能,前端页面中输入评论框在页面的最底部,在ios11中手机的输入法会遮住那个输入框,在其它手机上正常. 一直在找有关的解决方案,虽然最终也没有解决,还是记录过程,供参考. ...

  4. 移动端 input 输入框实现自带键盘“搜索“功能并修改X

    主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...

  5. 移动端页面输入法挡住input输入框的解决方法

    1,宽高用了百分比或者vw/vh布局的,input输入框的最外层父容器的可用JS动态设置为当前窗口的宽高(防止输入法的弹出令页面变形) 2,最外层父容器用了fixed定位的,不要用top:0;要用bo ...

  6. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  7. 项目小结:手机邮箱正则,URL各种判断返回页面,input输入框输入符合却获取不到问题

    1.手机邮箱正则 近两年出来很多新号码,听说199什么的都有了- -导致以前的正则不能用了....这就很难过,总是过一段时间出一种新号码.因此,我决定使用返朴归真的手机正则. 手机正则:var reg ...

  8. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  9. IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input

    移动页面经常会做到这样一个效果,看下面的图片,重点就是那个固定定位的底部,里面有个input输入框,在输入字符的时候,安卓手机看着是完全没有问题! 1.页面没有点击底部input的初始状态 2.安卓手 ...

随机推荐

  1. 笔记:Maven 生成项目站点

    Maven 不仅仅时一个自动化构建工具和一个依赖管理工具,他还能够帮助聚合项目信息,促进团队间的交流,POM 可以包含各种项目信息,如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信 ...

  2. Mysql 一次性备份导出/导入恢复所有数据库

    有木有遇到过这种情况?电脑或者服务器需要重装系统?可是你电脑上存着n多个网站的数据库,怎么办?把数据库文件夹拷贝出来,重装系统之后再拷回去?如果你使用了InnoDB引擎,恐怕那样做会出麻烦的,一个一个 ...

  3. JavaScript(第十一天)【变量,作用域,内存】

    JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据 ...

  4. C语言第五次作业--数据类型

    7-2 区位码输入法: 1. 本题PTA提交列表: 2.设计思路: 1.simple定义输入数,character1和character2分别定义低字节和高字节区位码,digit存储取余后的数,sum ...

  5. C语言博客作业—数组

    一.PTA实验作业 题目1:简化的插入排序 1. 本题PTA提交列表 2. 设计思路 (1)定义n,number,i,j,temp; (2)输入n; (3)定义数组a[n+1]; //把所有的数都放入 ...

  6. B-end

    Beta冲刺成员名单和工作量比例 姓名 学号 负责内容 工作量比例 张梨贤 170327109 负责企业人员的委托/收回授权.第三方机构的委托授权管理.分级统计展示.分级列表展示 26% 黄腾飞 17 ...

  7. 浅谈 ThreadLocal

    有时,你希望将每个线程数据(如用户ID)与线程关联起来.尽管可以使用局部变量来完成此任务,但只能在本地变量存在时才这样做.也可以使用一个实例属性来保存这些数据,但是这样就必须处理线程同步问题.幸运的是 ...

  8. 《javascript设计模式与开发实践》阅读笔记(15)—— 装饰者模式

    装饰者模式 可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.在程序开发中,许多时候都并不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰者模式. 代码例 ...

  9. centos7 编译安装greenplum5.7

    一.配置系统 安装是以一个主节点,三个子节点进行安装.gp是在github上下载的5.7的源码.地址https://github.com/greenplum-db/gpdb/tree/5.7.0. 1 ...

  10. 数据库 MYSQL操作(一)

    数据库  MYSQL操作总结(一) 本文主要介绍一下笔者在使用数据库操作的过程中的一些总结,主要的内容包括一下几个内容: 一.mysql 使用基础(主要包括数据库的安装.基本操作等内容) 二.mysq ...