当界面元素靠下时候的时候,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. Ionic1开发环境配置ji

    配置Ionic1开发环境环境:windows7 32位+jdk1.8+ionic1.3,64位系统可以参考下面方法,软件注意选择对应的版本即可.    1.下载JDK并配置Java运行环境       ...

  2. [POJ 2226] Muddy Fields

    题目 Description 如何放木板保证只覆盖到 '*' 而没有覆盖到 '.' Solution (我太废了竟然想这题想了一个小时)考虑当前需要被覆盖的点 (x,y),假设有一块横着铺的木板 i ...

  3. 在RE了16次之后,没想到还可以这样Runtime error

    这是POJ: RE的原因: 比如: int b=2147483647; for(int i=0;i<=b;++i){ .... } 应该懂了吧, 2147483647是int能表示的最大整数 解 ...

  4. linux服务器中毒可疑进程sfewfesfs CPU80%

    我用的是wdlinux, 难免会有漏洞,不知怎么就被莫名其妙地给入侵了,而且还频繁发包.下面是我查看攻击机器的整个过程. 首先跟客户要了root密码登录看,第一个命令是就top cd /proc/25 ...

  5. Java基础学习笔记九 Java基础语法之this和super

    构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...

  6. 【Spring源码深度解析学习系列】容器的基础XmlBeanFactory(二)

    一.配置文件封装 Spring的配置文件读取是通过ClassPathResource进行封装的,如new ClassPathResource("test.xml"),那么Class ...

  7. oralce数据库常用到的一些sql命令(加字段注释,修改数据之类)

    最近开始接触oralce,整理了一下最近使用 pl/sql 常用到的一些sql命令 1.修改表中的数据 编写查询语句及条件,然后加上"FOR UPDATE","FOR U ...

  8. 20145237《Java程序设计》第一周学习总结

    教材学习内容总结 java可分为Java SE.Java EE.Java ME三大平台. java SE分为JVM.JRE.JDK.与java语言四个部分. JRE包括java SE API和JVM. ...

  9. Linux之用户与用户组

    1.Linux是一种 多用户多任务分时操作系统. 2.Linux的用户只有两个等级:root用户和非root用户.   Linux系统默认 内置了root用户 和一些非root用户,如nobody,a ...

  10. 火车头采集器对接织梦cms图集发布时, 采集网上图片超时的解决方法

    背景介绍: 火车头采集器对接织梦cms图片集发布时, 对于多张(超过30张)大图片时, 经常会出现图集发布超时的情况.  问题分析: 因为php对于资源的处理有默认的超时时间30秒, 而我尝试了好多方 ...