ios移动端软键盘弹起引起的提交按钮错位问题

最新推荐文章于 2025-04-08 10:33:10 发布
原创 最新推荐文章于 2025-04-08 10:33:10 发布 · 448 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动端 #html表单 #软键盘

本文介绍了一种常见的移动端开发问题：当输入框聚焦并弹出软键盘后，页面布局错位导致提交按钮位置偏移的现象。文章提供了一个简单有效的解决方案，通过在输入框失去焦点时执行特定代码来调整页面布局，确保提交按钮始终处于正确位置。

移动端表单元素（input,textarea等）聚焦时，软键盘弹起再收回，提交类按钮由此引起的错位问题，在表单元素失去焦点时，加入以下代码：

Vue3 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
🏆 前端领域优质创作者
06-22 1万+
vue3，h5网页，input输入框组件，vue3 h5软键盘弹出，vue3输入框，键盘弹起时页面整体上移问题，uni，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue3输入框，键盘弹起时页面整体上移问题，vue3调用手机系统软键盘，页面窗口被顶起，布局定位失效，解决VUE3软键盘弹起导致页面fixed定位元素被顶上去，输入法软键盘弹起，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界
微信小程序：解决小程序底部input输入框，键盘弹起时页面整体上移问题解决，软键盘弹起时自定义顶部导航被顶出页面，软键盘弹出使页面布局上移导致内容顶到手机状态栏或页面错位变形问题（方案兼容安卓与苹果）
高级前端工程师
09-07 3934
微信小程序键盘弹起后页面上推问题，小程序底部input输入框，键盘弹起时页面整体上移问题解决，解决小程序输入框，键盘弹起时页面整体上移问题，解决微信小程序自定义头部后，软键盘弹起时页面整体上移，微信小程序底部input输入框，键盘弹起时页面整体上移问题，微信小程序解决ios页面上推问题，小程序input输入框键盘弹出使得布局上移问题，输入框聚焦弹出键盘，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，页面整体上移过多导致内容遮挡或错位等，输入框聚焦弹出键盘，页面整体上移过多，微信小程序表
H5页面移动端IOS键盘收起焦点错位
weixin_30763455的博客
04-28 616
出现场景：IOS端，在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0，收起键盘时scrollOffset不变，造成焦点错位。 注：安卓手机点击时调起键盘不会把页面顶上去，会改变窗口高度变化，收起时不会造成影响。 jq处理： 1 $('input').on('blur', function (event) { 2 　　if (!(e...
H5的IOS端软键盘错位兼容解决
steve_sjf的博客
05-05 1767
参考至：https://mp.weixin.qq.com/s/u1KIkWm-1VFu4r8VzvB5Dg 问题描述：在IOS12以上的微信端，iPhoneX的型号和华为保时捷的型号的微信购物，出现input弹出后结算按钮点击无反应的情况。 分析：是由于IOS端第三方输入法的软键盘弹出后，焦点无法复位。 实际调试代码如下： 在页面script内加入，将需要调整的input加上class=...
兼容ios上input或者textarea失焦时页面不回弹
qq_37826391的博客
03-02 392
###vue实现代码 1.Vue.directive(‘drop’, { inserted: function(el) { let userUA = navigator.userAgent; if (userUA.indexOf(‘iPhone’) > -1||userUA.indexOf(‘iPad’) > -1) { el.onblur = function() { setTime...
修复ios对于input和textarea失焦后造成的scroller错位问题
switter的博客
03-31 420
$("input").unbind("blur").bind("blur",loseFocus); $("textarea").unbind("blur").bind("blur",loseFocus); function loseFocus(){ var ua = navigator.userAgent.toLowerCase(); var u...
项目难点：解决IOS调起软键盘之后页面样式布局错乱问题
Mr.小灰狼_随笔
08-15 3131
项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题
uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
🏆 前端领域优质创作者
04-08 6425
uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复
安卓手机，我不想让软键盘顶起我底部的按钮，怎么操作
最新发布
11-27
核心矛盾在于软键盘弹起会压缩页面高度，导致fixed定位的底部按钮被顶上键盘区域。需要同时考虑两种场景： 1 当页面高度不足时（如聊天界面），需要将底部按钮贴在键盘上方 2 当页面有滚动空间时（如长表单），应...
vue3 ios和安卓点击按钮实现不唤起键盘
09-17
1. Vue3移动端开发中，如何全局处理iOS和安卓的软键盘弹起导致的页面布局错乱问题？ 2. 在Vue3项目中，如何正确使用FastClick库以避免移动端点击延迟和点击穿透问题？ 3. Vue3组合式API中，如何封装一个全局的键盘...
ios弹出键盘再收起时，原虚拟键盘位点击事件无效
weixin_44163210的博客
10-24 502
inputHandle () { var inputs = document.getElementsByTagName('input') for (let i = 0; i < inputs.length; i++) { var item = inputs[i] item.addEventLis...
ios 最新系统bug与解决——微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效...
weixin_34327761的博客
12-06 1264
最近ios发布新版本系统12.1，随着部分用户的系统更新，一些问题也渐渐暴露出来。。。 公司用户反映微信公众号出现了点击无效的bug！！测试调查发现，只有iphonex、iphone6，ihpone7等部分机型会出现该问题 我当时就是一惊，一般出现在事件上的问题都是疑难杂症。何况是跟键盘相关的。 我们都知道在H5端是没法监控键盘的弹出与收起的，resize事件触发的机型极其有限，何况我在ios中实...
ios手机弹出软键盘后按钮失效
chaitong2204的博客
05-04 1154
直接在点击事件中加document.body.scrollTop = 0;
h5移动端使用手机自带软键盘的“前往”、“go”键提交表单
qq_32538087的博客
04-30 5910
这也是我自己在项目中遇到的问题，在网上找了很久都没有找到类似的。试了很多次浪费了很多时间 登录和搜索时“前往”、“go”或者回车(电脑键盘)键提交表单（form） 表单里有一个type=”submit”或者type=”text”就可以用“前往”、“go”或者回车键提交表单 但是要注意，如果表单中有两个button按钮，一定都要设置type，不然提交不成功（因为用input我们都会去设置ty...
H5 IOS input输入框唤起键盘导致页面元素位置错乱问题
qq_37942845的博客
02-12 6837
方法1：vue项目 // 输入框获得焦点时触发 focus() { this.timer.T = setInterval(() => { // 完美解决输入框被软键盘遮挡 this.$refs.footer.scrollIntoView(false) }, 200) }, blur() { // ...
ios 最新版 12.1.x 在微信中 input等调起软键盘后页面按钮位置偏移问题，记录一下
南思琼海
03-13 1394
原文https://juejin.im/post/5c07442f51882528c4469769 这里直接给出解决方案 方案1 onBlur = (e) =&gt; { const { onBlur } = this.props; document.body &amp;&amp; (document.body.scrollTop = 0); onBlur &amp;&amp; onBlu...
ios 微信移动端web页面input弹出键盘导致页面错乱
mcYang0929的博客
05-15 2752
最近发现，ios移动端Web页面在微信中，input输入框使键盘弹出和收起，导致页面上的位置错乱 问题复现： 我在页面中有一个position:fixed弹层，弹层上面有输入框，当点击输入框的时候，弹出来微信键盘，在输入完毕后，输入框失去焦点，发现页面并没有恢复到底部，这时点击页面上的按钮会错位，导致position为fixed内部的按钮无法点击了。 解决办法： 1.当出现上述问题时，发现...
el-select在IOS移动端上选项被软键盘顶起错位
11-07
在iOS移动端上，el-select组件可能会遇到一个问题，即当用户聚焦于下拉选择框（option list），软键盘弹出时，页面内容会被顶起，导致select组件的选项显示位置错乱。这是因为iOS系统对于键盘事件处理的方式以及其...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值