带你跳出H5输入框input的坑

最新推荐文章于 2024-05-09 09:50:03 发布
最新推荐文章于 2024-05-09 09:50:03 发布
阅读量2.2w 收藏 2
点赞数
分类专栏： HTML5 JavaScript 文章标签： javascript html 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22509715/article/details/52452458
版权
本文介绍了在开发微信H5页面时，遇到手机键盘弹出导致页面被压缩的问题，以及如何通过JavaScript动态调整页面top和高度来解决这一问题，适用于Android和iOS设备。
摘要由CSDN通过智能技术生成

不知道经常做微信H5的小伙伴有没遇到这样的问题，在PC浏览器完美测试的页面，一到手机上就崩溃。

崩溃的程度决定了你的心情，哈哈。完美的呈现总有不明的自豪感。屌屌的！哈哈！


但是作为一名稳重的程序员，最起码的沉着肯定是要有的。我今天就来沉着的吹牛*了！


遇到的问题是input的坑——手机的键盘把H5的页面压榨了，很难受。不管是Android还是IOS都曾经遇到过这个问题。


解决思路也比较简单，就是通过JS把页面的top和高度都动态再设置一次，完美解决！微笑


直接上代码！


HTML

<span st
最低0.47元/天 解锁文章
Jouryjc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jQuery实现手机自定义弹出输入框
10-22
本文将深入探讨如何使用jQuery来实现在手机端自定义弹出的输入框，而非使用设备默认的键盘。这种方法对于处理特殊输入需求，如输入特定格式的数字、日期或其他定制化的输入控件特别有用。 一、禁用手机自带键盘 ...
解决input获取焦点，弹出输入法之后，input被遮挡的问题
樊小书生
06-12 6873
关于input输入框fixed在窗口底部的时候，input获取焦点，弹出输入法，input会被输入法遮挡，导致输入内容不方便。 我们可以用scrollIntoView 与 scrollIntoViewIfNeeded来解决这个问题。scrollIntoView 与 scrollIntoViewIfNeeded都是让当前的元素滚动到浏览器窗口的可视区域内。关于scrollIntoView 与 sc...
IOS遇到的几个H5坑、h5键盘弹起遮挡输入框的处理
最新发布
Bynine9的博客
05-09 850
原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部）问题描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。
H5移动端弹出键盘时遮挡输入框
qq_37231097的博客
08-03 2万+
在写移动端时，如果使用绝对定位Fixed将输入框（input或者textarea）,当手机的输入法为自带输入法时可能问题不大，但是当使用类似搜狗等输入法时，由于会高出自带输入法大约30个像素，就会造成输入框被遮盖一部分的现象，很尴尬。下边简单说说简单的解决思路，当然还有复杂的。 延时一定时间重新定位输入框。 点击输入框时加长body元素高度到9999px（当然不一定非要这么高），页面滚动到空白区域，
vue js IOS H5focus无法自动弹出键盘的解决方法
lizhen_software的博客
02-27 1万+
IOS不自动弹出键盘，必须手动触发一下focus才行，不能自动调用，所以需要诱导用户点击某个按钮触发focus，最终修改的方法，默认隐藏密码输入框，隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内，并且调用focus的方法代码如下，有问题欢迎评论&lt;template&gt; &lt;div class="p...
移动端 input 输入框弹出键盘时页面被吊打的解决方案
qq_20723129的博客
12-05 4837
前言 IOS 的兼容永远是前端开发的一个伤心地，虽然是这样，但你也没有办法，毕竟果粉还不是一般的少，当 IOS 键盘遇到 fixed 的时候，你除了感到无助外，更多的是绝望。不过现在曙光就在眼前，只要你把这篇文章仔细阅读完。 说走就走的旅程 首先我们得知道一个事实，那就是在绝大部安卓机中，只要你按常理出牌（常用布局），一般情况下点击输入框弹出手机键盘都不会有什么问题。这里我们不妨假设一个常用...
点击input输入框弹出选择层(基于jquery)
12-20
在网页设计和开发中，有时候我们需要为用户提供更加交互式的体验，比如当用户点击一个input输入框时，弹出一个选择层来供用户选择。这样的功能通常用于下拉菜单、日期选择器或者选项列表等场景。在这个案例中，我们...
教你跳出运营坑，不再一味做执行 .doc
03-11
这篇文档《教你跳出运营坑，不再一味做执行》旨在帮助运营人员理解自己的工作价值，跳出执行的循环，提升自身能力。以下是对文档内容的详细解析： 一、运营中的常见困境 运营人员常常陷入日复一日的执行工作中，...
CSS3账号密码输入框提示特效
07-24
在输入框提示特效中，通常会将提示文本设置为绝对定位，使其相对于输入框本身进行定位，这样即使输入框大小变化，提示文本也能保持在合适的位置。 此外，CSS3的过渡（Transition）和动画（Animation）也是创建动态...
点击输入框弹出一个选择层js
08-06
input.parentNode.insertBefore(selectLayer, input.nextSibling); // 显示选择层 selectLayer.style.display = 'block'; ``` 在这个例子中，我们创建了一个新的`div`元素作为选择层，并添加了所有选项。每个选项...
HTML5日期输入框(date)
热门推荐
z_xiaocun的博客
07-17 6万+
HTML5的出现大大提高了程序员的开发效率，date日期选择器只是其中之一，还有其他一些新的特性，我们一起学习。
div模拟input实现输入框
珍妮的小罐君
03-30 3万+
因为一些原因，无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里，后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框（div可以根据内容自动调整高度哦）。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？   先看下效果： 看下代码（code）...
在移动端输入框在软键盘弹出后位置矫正
xm的博客
07-18 6829
今天在做移动web端页面时遇到一个问题，当input框获取焦点时，弹出的软键盘遮住input框，在网上找了许多资料，终于找到解决方案 var clientHeight = document.body.clientHeight;     var _focusElem = null; //输入框焦点     //利用捕获事件监听输入框等focus动作     document.body.add
在手机端点击input框不弹出输入法的方法
Queen-Shir的博客
11-22 2万+
1、使用CSS样式 ： input { pointer-events: none; }2、 使用事件阻止 ： input.onmousedown = function (e) { e.preventDefault(); } 这样不仅会阻止键盘，同时 input 会失去光标跟随。 如果你的需求不受这点因素影响，可以采用这种方式，否则还是自定义实现吧。3、使用其他非焦点获取的标签来代替input
H5：实时监听 input 输入框的值变化
海生的博客
08-03 2万+
(1)jquery：只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了。 $('#input').bind('input propertychange', function() {        alert("我是实时监听哦") }); (2)oninput 是 HTML5 的标准事件 对于检测 textarea, input:
移动端(html5)微信公众号下用keyup实时监控input值的变化无效
kongjiea笔记
10-17 2万+
项目中有一处需求是，搜索框依据用户输入的值实时检索，一开始自然而然想到keyup，在拼音状态时，啥问题也没有，后来切换到中文输入法，问题出来了，不灵便了，后来在网上搜了下，找到了思路，主要是给搜索框注册focus事件，隔个时间去检索下，贴出代码 $(function () { $('#wd').bind('focus',filter_time); }
php如何在选择一个选项后跳出一个输入框
04-20
可以使用JavaScript监听选项选择事件，在选项被选择时弹出一个输入框。 示例代码如下： HTML: ```html <option value="1">Option 1 <option value="2">Option 2 <option value="3">Option 3 ``` JavaScript...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值