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

最新推荐文章于 2021-12-03 11:26:44 发布
最新推荐文章于 2021-12-03 11:26:44 发布
阅读量631 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/haqiao/p/7896922.html
版权

1，宽高用了百分比或者vw/vh布局的，input输入框的最外层父容器的可用JS动态设置为当前窗口的宽高（防止输入法的弹出令页面变形）

2,最外层父容器用了fixed定位的，不要用top:0;要用bottom:0;不要用top:0;要用bottom:0;不要用top:0;要用bottom:0;（这就是重点！！！！！）

这个方法适用于有输入框的移动端页面，类似于一个登记信息的弹窗之类的页面。

转载于:https://www.cnblogs.com/haqiao/p/7896922.html

weixin_30733003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端解决input框被输入法挡住的问题
gs981600308的博客
05-26 1860
有过移动端web开发经验的人应该都会遇到这个问题，一个input在页面最底部或者偏下的位置，输入时由于输入法的弹出，在部分浏览器下由于不会自动计算window的高度，导致input被输入法挡住。 本文的解决方式是利用scrollTop来解决，在input获取焦点后，动态地设置body的高度并设置scrollTop到指定位置，这样可以保证input会滚动到输入法上方，失去焦点后再恢复原来的位置。 有两种情况： 1、input在页面最底部，后面没有其他元素，这种情况我们可以获取窗口的高度减去input的高度再减
关于移动端输入法遮住input输入框相关问题
qq_34673379的博客
07-03 288
法一 也是主流方法，但是可能我们项目里的输入法没有占据屏幕也就是clientHeight ，因此失败。 Element.scrollIntoView() //使当前的元素滚动到浏览器的可视区域内 Element.scrollIntoViewIfNeeded() //若当前元素已经在浏览器的可视区域内则不滚动否则滚动 法二 改变根元素的高度： 在vue里注册一个全局方法，需要在每个...
安卓手机点击input框，会被键盘挡住的问题。
JasonSon__的博客
07-19 5300
      最近在做项目时，发现安卓手机的点击输入框后，键盘升起会把input框挡住，只能手滑显示出来，而苹果手机就没有这个问题。        后来发现这是安卓手机的机制问题。 解决办法：        1.写个js即可（对于vue项目，将js写在mounted即可） // 处理安卓手机输入法遮挡输入框问题（摘自WEUI） if ((/Android/gi).test(nav...
部分安卓手机点击输入框，输入法会将输入框遮住问题
Jsoning的博客
11-27 7471
在写移动端页面时候在乐视手机测试时，点击输入框，输入框无法自动调整到可视区域，并且输入法挡住了输入框，在其他苹果和安卓手机上测试是可以自动移动到可视区域的上网找了一些方法： 1、scrollIntoView(true | false) 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐。目前各浏览器均支持2、scr
输入法框挡住输入框的问题解决以及设置输入法模式
三人行，必有吾师
08-27 2512
大家在布局时候，有时候会发现输入框被挡住一部分，能完全显示出来，但是系统自带短信界面 可以完全漂浮在软键盘之上，看了一下短信源码，修改一下输入模式就可以了，源码如下 代码方式： getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE |                 WindowMa
针对软键盘挡住input输入框的问题
weixin_30849591的博客
09-19 159
思想是：注册登录的高度自适应，在页面加载完成时，设定页面高度为可视区的高度，在js里检测安卓还是苹果，苹果不用做操作，安卓则隐藏input框上面的logo， //软键盘 $(function(){ //本来body设置100%，防止body变化，设置body高度为可视区域高度； $('body,html').height(window.innerHeight); // 对手机...
Input被软键盘遮住
weixin_34327761的博客
02-01 511
在业务开发过程中，移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。 网上也有很多解决办法，比如计算高度然后scroll到某个地方、调用scrollIntoView，、scrollIntoViewIfNeeded、监听window的resize方法、定位fixed。方法有很多。 这边提一下踩过的坑，如果是scrollIntoView和scrollIntoViewIfN...
Android输入法弹出时覆盖输入框问题的解决方法
01-20
为了解决这个问题，开发者可以尝试使用`adjustPan`，但这种方法会使页面整体平移，可能会造成用户界面的抖动，用户体验不佳。因此，我们需要寻找更优雅的解决方案。 一种可行的解决方案是创建一个自定义的`...
解决ios h5 input输入框被输入法弹出一块区域的问题
01-05
问题：如下图 解决方案 scrollIntoView ... * 使用方法 输入框中 onclick=sr(this); onblur=nosr(this) */ var timer1; function sr(obj) { timer1 = setInterval(function() { obj.scrollIntoView(false); },
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
09-01
这个问题在描述中被称为"键盘挡住输入框"的问题。解决这个问题对于提供良好的用户体验至关重要，特别是对于那些要求高度交互的应用，如微信这样的即时通讯工具。 在上述的解决方案中，开发者创建了一个AngularJS...
Swift让输入框跟随键盘弹起避免输入输入法挡住输入框问题
09-01
为了解决这个问题，Swift提供了一种方法，使得输入框能跟随键盘一起弹起，确保用户始终能够看到他们正在输入的内容。以下是如何实现这一功能的详细步骤： 1. **创建Controller**： 首先，你需要在Xcode中创建一个...
uni-app 输入框被软键盘挡住
明日晴空的博客
08-13 8574
那可能是你忘了给input输入框，加类名， class = ‘uni-input’，就是这么简单~
uniapp input 框调起键盘后被部分遮住
Florenza的博客
11-23 3051
<input class="uni-input" cursor-spacing="15" :adjust-position="true"/> input | 微信开放文档 adjust-position boolean true 否 键盘弹起时，是否自动上推页面 cursor-spacing number 0 否 指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小...
处理VUE移动端输入法遮挡input输入框的问题
scorpio的世界
10-09 2491
1、tmplate部分 <input v-model="id" @blur="blurIn"> 2、methods方法 blurIn() { window.scrollTo(0, Math.max(this.scrollHieght - 1, 0)) } 3、computed部分 computed: { scrollHeight() { return ( document.documentElement.scrollTop.
解决安卓手机H5页面input获得焦点时键盘遮住输入框
幺叭伍的博客
12-03 4258
ios在移动端点击input弹出键盘时内容会自动上移展示出文本框； 安卓在点击input弹出键盘时键盘会遮住文本框； 解决办法如下： window.onload = function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //判断安卓手机 // 拿到获取焦点的
解决移动端输入法遮盖input输入框的问题…
一个有思想的新时代农民工的博客
10-09 1万+
一般的原生的系统里面并没有这个bug，但是第三方往往会出现 解决办法原理是通过给body添加scrollTop，把input的位置挪到最上面就可以了， 另一种通用方法是使用fixed定位到顶部，是可以解决，但是下面的内容会暴露出来，虽然通过嵌套一层能解决，而且脱离文档流，可能有样式问题，无疑又麻烦了,下面是真的第一种办法解决的demo<html> <head> <meta charset
Html 手机键盘挡住输入框
开心的去学习->研究
02-04 204
<script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $('input').focus(f
前端遇到的坑--键盘遮挡input框的解决办法
热门推荐
trigger的博客
06-07 1万+
input输入框是通过position:fixed一直放在页面底部，当点击input进行输入的时候，就会出现如下图片情况（有的机型会遮挡一些）。 当时这个问题是去年在ios中遇到的，在最新版的ios系统中，貌似解决了这个bug，但是为了向下兼容以及防止其他其他机型也出现这个问题，大家可以稍微记一下这个解决方法。   Element.scrollIntoView() Element.sc...
html+javascript 中文输入法情况下，input输入框没有聚焦，按下a键自动聚焦input输入框并且弹出拼音输入法连贯输入
最新发布
05-31
你可以使用以下代码实现这个功能： ```html <input type="text" id="myInput" /> <script> // 监听键盘按下事件 document.addEventListener('keydown', function(event) { // 如果按下的是字母a并且输入框没有聚焦 if (event.key === 'a' && document.activeElement !== document.getElementById('myInput')) { // 聚焦输入框 document.getElementById('myInput').focus(); // 弹出拼音输入法 document.execCommand('selectAll', false, null); } }); </script> ``` 当用户按下键盘上的a键时，会触发键盘按下事件。我们在事件处理函数中判断按下的是否是a键并且输入框没有聚焦。如果是，我们就聚焦输入框并且使用`document.execCommand`弹出拼音输入法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值