微信H5 input输入时，软键盘顶到页面

最新推荐文章于 2022-12-20 21:21:17 发布
原创 最新推荐文章于 2022-12-20 21:21:17 发布 · 563 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用jQuery实现的功能，当页面上的输入框失去焦点时，自动将页面滚动到顶部的方法。通过简单的代码示例，展示了如何监听输入框的blur事件，并在该事件触发时将窗口滚动条的位置设置为0。

方法二：

$("input").on(‘blur’,function(){
    $(window).scrollTop(0);
});

Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）
🏆 前端领域优质创作者
06-22 1万+
uni-app，h5网页，input输入框组件，uniapp h5软键盘弹出，uni-app 输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决uni-app 输入框，键盘弹起时页面整体上移问题，uniapp调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决uniapp软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，UniApp中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚
h5键盘弹起底部菜单(按钮)被顶起-vue自定义指令解决
m0_37824255的博客
09-20 3361
开发H5中测试过程中发现在安卓手机上，input/textarea 获取焦点 软键盘弹出 会让absolute/fixed或者使用flex局部 固定在底部的元素(固定底部栏)顶起来问题；在搜索后发现安卓上在键盘弹起的时候浏览器。我这边我是使用了input/textarea 的focus/blur事件，及配合resize事件来设置固定底部栏。添加上之后 我们就会发现现在是可以符合我们的条件的，当键盘展示时隐藏底部固定栏，收起键盘时展示底部固定栏。自定义指令详情 请参考官方文档。
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题
泥鸽鸽的博客
11-20 2850
如何解决H5页面底部按钮使用fixed布局的时候被输入法顶上来的问题目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？这个问题目前发现是部分安卓机上存在 解决思路有两个方案1：隐藏按钮 目前H5 做手机端越来越流行 这段时间在开发手机端h5页面的时候就遇到一个问题 当在真机上测试的时候 底部使用固定定位的按钮被输入法弹框顶起来 这该如何解决呢？ 这个问题目前发现是部分安卓机上存在 解决思路有两个
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
10-31
iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案 兼容ios8 ios9 ios 10
H5移动端输入框随键盘上移
逆袭的菜鸟X
05-27 9315
输入在移动端是一个很常用的功能，那么输入框必然是一个很重要的部分。然而，移动端输入框总会遇到各种各样的问题，无论是样式还是ios和android两端体验不一致都是很让我们头疼的问题，那么如何使移动web的输入框体验更贴近原生也成了一个需要我们多多思考和研究的问题。 一、文字输入限制问题 我们拿最多可输入16个字为例。当输入字数（注意，不是字符长度）超过16字时，会触发 tips 提示，并且不能继续输入。 办法一： textarea 可以使用 maxlength 进行输入字数限制。 但是这个办法只能单纯的限制
H5端关于input框输入软键盘弹起底部固定的解决方法
热门推荐
weixin_41612533的博客
01-10 1万+
最近工作中做了一个关于H5端的项目，用不同机型自身带的浏览器测试页面，用手机上安装的UC、QQ浏览器测试页面的兼容性，各种问题都出现了，遇到这么多的问题，头都炸毛了。不过最为严重的也就只有两个问题，关于form表单中input获取焦点的时候软键盘弹起，固定在底部的内容被弹起遮盖住了页面的内容，不符合项目的要求。不过经过测试，发现华为mate8手机自身带的浏览器解析css还算是比较严谨的，因为就他的
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以...
Vue解决微信浏览器input关闭键盘后导致页面底部空缺的问题
01-08
是微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在页面的底部，当唤起软键盘的时候，由于高度问题，整个webview会被键盘顶上去，，而取消的时候没有恢复原状。 解决办法 第一种：失去焦点后...
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1354
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
html输入框自动置于键盘前,HTML5 - 虚拟键盘出现挡住输入框的解决办法
weixin_30338049的博客
05-31 536
1，问题描述我们使用H5做移动App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。(这个只有在Android系统下会有这个问题，iOS系统会自动将整个页面上移动。) 2，解决办法我们可以借助元素的scrollIntoViewIfNeeded()方法。这个方法执行后如果当前元素在视口中不可见，则会...
解决 H5 IOS input 聚焦时，软键盘将页面整个推上去，键盘收起页面未下移 BUG
Okey
07-09 5193
目录问题描述解决方案 问题描述 近日在开发H5应用时，测试人员发现在IOS低版本中input，textArea等输入框聚焦时，软键盘弹起会将整个页面向上顶，收回键盘后，页面不会回弹恢复页面，导致页面下方产生大量空白。 解决方案 在页面中添加以下js即可解决： // 解决 H5 IOS input 聚焦时，页面整个被推上去了，键盘收起页面未下移 BUG $(function () { (/iphone|ipod|ipad/i.test(navigator.appVersion)) && do
解决H5移动端点击输入框时，弹起的输入法会将底部的固定按钮顶起来
Redamancy的博客
08-25 2684
在写一个H5页面的时候，中间有输入框，底部有固定按钮。但是在点击输入框时，你就会看到一个奇怪的事情，我fixed固定在底部的部分被输入法顶起来了（图片先欠着）。 下面给大家提供一种解决的办法，仅供参考。 //navigator.userAgent.indexOf用来判断浏览器类型 var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1; if (i
小程序文本框悬浮软键盘之上
前端_李嘉豪
08-22 3677
效果： 方法很简单接下来给大家详细讲解,input获取焦点时,可以拿到软键盘的高度,那么问题就好解决了 我们只需要拿到这个高度去给input写一个动态的定位样式即可 <view class="inputBox" style="bottom:{{bottom}}px">//行内动态绑定样式 <input class="input" ...
H5蒙层上的输入框，被键盘挡住
qq_35431814的博客
11-30 686
关于h5蒙层上得输入框被手机软键盘挡住解决方案： 让遮罩层可以滑动 html &lt;div class="zt_body"&gt; &lt;div&gt;内容...&lt;/div&gt; &lt;div class="mask"&gt;遮罩层&lt;/div&gt; &lt;button class="btn"&gt;弹出&lt;/bu
让view浮动到输入法键盘上面
wu1004019946的博客
06-21 2253
ps:(在fargement使用) int statusBarHeight;//状态栏高度 int screenHeight; // 屏幕高度 int keyboradHeight; //键盘弹出高度 @ViewInject(R.id.ll_parent) private RelativeLayout ll_parent; @ViewInject(R.id.scrollView) priva
固定在 H5 底部的输入框的兼容性问题
kill370354的博客
12-20 1098
放在页面底部的输入框，可能存在三个问题： 1. 键盘挡住输入框 2. 键盘出现后，点击输入框旁边的按钮没有反应 3. Safari 里键盘与输入框有间距，没有紧密贴合
H5，JS仿微信输入法，键盘上面带input输入框，兼容安卓、ios
三俩句的博客
09-19 2097
H5，JS仿微信输入法，键盘上面带input输入框
移动端软键盘监听和兼容性写法(h5)
zero_person_xianzi的博客
08-18 2785
移动端的软键盘可分两类，一类(下文以X代替)是会把底部固定的元素(position:fixed元素)上弹的，还有一类(下文以Y代替)是不会上弹的。这两类必须分开处理。 h5是没有专门的软键盘事件的，只能自己模拟！ 监听X的软键盘事件,可以使用 window.onresize来监听 onresize 事件会在窗口或框架被调整大小时发生 X底部固定的元素上弹是因为窗口变小了。 w...
uniapp 小程序input标签聚焦时软键盘不弹出
最新发布
10-30
<think>根据提供的引用内容，用户的需求是在uni-app小程序中实现input标签聚焦时不弹出软键盘。根据引用[1]，可以通过设置inputmode属性为"none"来阻止软键盘弹出，但该方法兼容性较差（需要Android 10及以上）。引用[3]和[4]则提供了通过定时器调用uni.hideKeyboard()来强制关闭软键盘的方法，但存在闪烁或偶尔先弹出再关闭的问题。 综合以上信息，给出以下解决方案： 1. **使用`inputmode="none"`属性（推荐但需注意兼容性）** 在input标签上直接设置`inputmode="none"`属性（H5和部分高版本Android支持），但低版本Android和iOS可能不生效。示例代码： ```html <input inputmode="none" placeholder="扫码输入" /> ``` 2. **使用renderjs强制设置属性（引用[1]方案）** 通过uni-app的`renderjs`在mounted生命周期中动态设置`inputmode="none"`，提高兼容性： ```html <template> <input ref="myInput" /> </template> <script module="input" lang="renderjs"> export default { mounted() { this.$el.querySelector('input').setAttribute('inputmode', 'none'); } } </script> ``` 3. **定时器隐藏键盘（引用[3][4]方案，有闪烁风险）** 若上述方法无效，可采用定时器循环隐藏键盘（需注意性能）： ```javascript methods: { focusInput() { this.$refs.myInput.focus(); // 手动触发聚焦 this.stopKeyboard(); }, stopKeyboard() { let interval = setInterval(() => { uni.hideKeyboard(); // 循环隐藏键盘 }, 20); setTimeout(() => clearInterval(interval), 1000); // 1秒后停止 } } ``` 4. **全局混入focus控制（引用[3]的高级方案）** 将引用[3]的混入方案集成到项目中： - 创建`focus.js`文件（代码见引用[3]）； - 在页面中引入并调用`$toFoucs(index)`定位光标，同时自动关闭键盘。 **兼容性说明**： - iOS系统由于安全限制，可能无法完全阻止键盘弹出，但可通过隐藏键盘实现类似效果。 - 安卓低版本需测试`inputmode="none"`的支持情况。 **推荐方案**： 优先尝试`renderjs`设置`inputmode="none"`（方案2），若无效则采用混入定时器方案（方案4）。 相关问题： 1. 如何解决uni-app中iOS系统键盘遮挡输入框的问题？ 2. 在uni-app中如何实现扫码枪输入时保持键盘不弹出？ 3. uni-app的input组件有哪些控制键盘的属性？ 请根据实际运行环境选择合适方案并进行兼容性测试。 </think>### UniApp小程序Input标签聚焦时软键盘不弹出的解决方案 根据提供的引用信息，以下是几种有效的解决方案（按推荐优先级排序）： #### ✅ 最佳方案：使用 `inputmode="none"` 属性（引用[1]） ```html <template> <input inputmode="none" placeholder="扫码输入" @focus="handleFocus" /> </template> <script module="input" lang="renderjs"> export default { mounted() { // 安卓10+设备有效 this.$el.querySelector('input').setAttribute('inputmode', 'none') } } </script> ``` **优点**：系统级阻止键盘弹出，无闪烁 **注意**：需Android 10+支持，iOS兼容性较差 #### ✅ 替代方案：全局混入定时隐藏键盘（引用[3]） 1. 创建 `focus.js` 混入文件： ```javascript // focus.js export default { data() { return { foucsIndex: 0 } }, methods: { $toFoucs(to, hideKeyboard = true) { this.foucsIndex = 9999; this.$nextTick(() => { this.foucsIndex = to; if (hideKeyboard) this.$hideKeyboard() }) }, $hideKeyboard() { const interval = setInterval(() => uni.hideKeyboard(), 10) setTimeout(() => clearInterval(interval), 1000) } } } ``` 2. 页面中使用： ```html <template> <input :focus="foucsIndex === 1" /> </template> <script> import focusMixin from '@/mixins/focus.js' export default { mixins: [focusMixin], methods: { scanBarcode() { this.$toFoucs(1) // 聚焦输入框并隐藏键盘 } } } </script> ``` #### ️ 应急方案：强制隐藏键盘（引用[4]） ```javascript methods: { handleFocus() { this.stopKeyboard() }, stopKeyboard() { const interval = setInterval(() => uni.hideKeyboard(), 20) setTimeout(() => clearInterval(interval), 3000) } } ``` ### 兼容性说明 | 方案 | Android兼容性 | iOS兼容性 | 体验 | |---------------------|--------------|----------|----------| | `inputmode="none"` | 10+版本 | 较差 | ⭐⭐⭐⭐ | | 全局混入定时隐藏 | 全版本 | 良好 | ⭐⭐⭐ | | 强制隐藏键盘 | 全版本 | 一般 | ⭐⭐ | **最佳实践建议**： 1. 优先尝试 `inputmode="none"` 方案 2. iOS设备推荐使用全局混入方案 3. PDA设备建议配合 `@focus` 事件触发隐藏逻辑 4. 对于扫码场景，可结合 `<camera>` 组件实现无输入框扫码[^1] ### 相关问题 1. 如何解决iOS系统软键盘弹出时遮挡输入框的问题？[^2] 2. UniApp中如何实现扫码枪输入时不触发软键盘？ 3. 在微信小程序中如何保证键盘弹起时页面布局不被破坏？[^2] 4. 如何全局管理UniApp中的键盘显示/隐藏状态？ 5. 针对不同安卓版本，应该如何选择键盘控制方案？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值