移动端,input输入框被手机输入法解决方案

时间:2023-01-03 12:49:02

当界面元素靠下时候的时候,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. IOS11 底部输入框被手机输入法遮住

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. button按钮被输入法顶起来,遮盖了input输入框

    在做手机端的表单提交的时候,在chrome浏览器调试的时候,忘记输入法会引起布局的问题.在webApp里input输入框,会自动调起输入法,但是输入法会改变浏览器的可视区域的大小.就是会把浏览器可视区 ...

随机推荐

  1. html页面定位

    对于css中的position:relative;我始终搞不明白它是什么意思,有什么作用? 对于position的其它几个属性,我都搞懂了 引用 static : 无特殊定位,对象遵循HTML定位规则 ...

  2. 求教Sublime Text2 SublimeLinter插件安装问题

    昨天装了 SublimeLinter插件(代码语法检测),这个事插件的地址:https://github.com/Kronuz/SublimeLinter 按照作者的介绍配置了一下,发现语法检测不起作 ...

  3. drupal记录(一)

    翻译包下载网址:locallize.drupal.org 中文模块 local 自动下载模块 L10n_update 第三方menu菜单 admin menu,menu bar 打开这个后要关闭系统自 ...

  4. CSS3卷角

    众所周知,border-radius 属性可以用来设置圆角,但很少人知道它还可以做很多不规则的犄角.卷角(rounded corners) 工作原理: 一.独立属性:border-bottom-lef ...

  5. oc学习之路----代理模式

    今天刚学完oc的代理模式,觉得有点新奇,第一次接触,原理 A完成一件事,但是自己不能完成,于是他找个代理人B 替他完成这个事情,他们之间便有个协议 (protocol),B继承该协议来完成A代理给他的 ...

  6. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  7. JAVA中令人疑惑的字符串

    Java中不同的字符串存在于同一个存储池中,字符串变量将指向存储池中相应的位置,也就是字符串变量里面包含的并不是字符串而是这个字符串对象的内存地址. String a = "123&quot ...

  8. Maven常见错误以及解决方案【转载】

    常见的Maven错误 当遇到401错误的时候,看看自己当前使用的Maven是集成的还是自己下载的,然后去配置setting.xml文件

  9. 转 - &period;net&sol;c&num; 使用RabbitMQ

    背景 最近需要用C#写一个Adapter来做数据传输,合作方使用的是RabbitMQ,所以我这边也要跟着写写... 在网上搜索了一些,发现园子里的这篇写的还是非常好的.虽然有点老了,我自己用的是最新的 ...

  10. busybox&lpar;四&rpar;完善

    目录 busybox(四)完善 proc挂载 手动挂载 proc解析 使用脚本自动挂载 使用mount-a挂载 udev/mdev 挂载 使用jffs2 文件系统格式 安装zlib 安装jffs2 生 ...