IOS手机唤起键盘，输入框失去焦点后页面元素点击事件位置偏移

最新推荐文章于 2021-07-02 10:31:33 发布

兢兢业业程序员

最新推荐文章于 2021-07-02 10:31:33 发布

阅读量2.3k

点赞数 2

本文链接：https://blog.csdn.net/weixin_41587194/article/details/100559867

版权

移动端页面中如果有input框，在IOS手机中，当唤起系统键盘输入数据完成后，再去点击页面其他元素，会发现点击位置偏移的问题，这是因为在IOS系统中唤起键盘后页面向上滚动了一段距离。这就需要我们在input框失去焦点时取消页面的滚动距离window.scroll(0,0);这个方法可以解决此问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兢兢业业程序员

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决 h5 唤起键盘后，导致了页面偏移。

qq_29615135的博客

09-18

1020

window.addEventListener('resize', () => { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(() => { if ('scrollIntoView' in document.activeElement) { document.acti

Vue+Element-UI开发问题解决：如何表单验证；输入框失去焦点还有错误信息

zxh_log4j的博客

02-01

4853

Vue+Element-UI的表单验证，注意的点有以下： ref ：该属性相当于一个id，可以获取该表单对象 model ：不设置该属性，失去焦点后错误消息还会继续存在 rules ：绑定校验的规则 prop ：关联规则设置的属性 Vue实例： var vue = new Vue({ el: '#app', data: { //表单数据 formData: {}, //校验规则

参与评论您还未登录，请先登录后发表或查看评论

解决IOS的h5唤起键盘导致页面元素错位

Amy_cloud的博客

10-11

879

在input绑定blur事件： blur(event) { let result; if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS result = 'ios'; } else if (/(Andro...

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

asdfgh0077的博客

11-25

308

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

ios移动端软键盘收起后input输入框焦点错位或无法输入解决

miracle_mf的博客

09-17

1983

本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决问题描述：页面背后是可滚动的列表，前面是弹出框，里面有需要输入值的input框。当打开键盘后，弹出框跟后面的列表都会被顶上去一段距离，当再关闭键盘就可能出现：前面的弹出框回到了原来的位置，而后面的列表依然是顶上去的位置。这时后再去点击弹出框的输入框或者按钮的时候发现焦点依然停留在键盘弹出后顶上去的...

苹果手机弹起输入框将页面上的元素上移

weixin_30478619的博客

09-20

1294

1.页面上有多行输入元素 2.在中间某个元素点击去输入后显示新的遮罩层去输入信息，这时键盘出现把输入块上移导致新弹出的层的输入框上移被遮住 3.可以隐藏遮罩下的部分元素让遮罩上的正常显示转载于:https://www.cnblogs.com/sunnie-cc/p/9683815.html...

苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移

料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴！

11-21

1189

1.问题现象：苹果手机点击输入框弹出键盘后，所有按钮点击位置上移 2.解决方法：找了很多什么scroll()都不行，只有这个有生效了。 document.body.addEventListener('focusout', () => { document.body.scrollIntoView(true); }); ...

解决h5页面在ios端输入框失去焦点后页面不回弹或者底部留白问题（小程序内webview嵌入的h5也适用）

一键写代码的博客

07-02

1359

方法就是在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur） 1、原生页面 const windowHeight = window.innerHeight input.addEventListener('blur', function () { let windowFocusHeight = wi

记录H5页面IOS中input输入框失去焦点后，键盘隐藏

热门推荐

baidantop的博客

01-16

1万+

//问题描述：安卓下无此问题，在ios自带的浏览器中，H5页面在input输入获取焦点后键盘弹出，随便触碰一个地方要使键盘隐藏 //解决方案：如下 jQuery("body").on("touchend", function() { //body上面绑定touchend事件 jQuery(".input_box").each(function (i, v) { //自定义一个.input

iOS客户端内H5页面的input输入框聚焦唤起键盘后，点击其他按钮唤起confirm框会导致键盘遮挡问题

Edward要加油哦

06-22

960

iOS客户端内H5页面的input输入框聚焦唤起键盘后，点击其他按钮唤起confirm框会导致键盘未收回，遮挡到confirm弹窗

IOS 键盘挡住输入框的问题解决办法

01-05

IOS 键盘挡住输入框的问题解决办法在iOS开发发现一个问题，有时输入框位于低出时，当编辑输入时，弹出的键盘会挡住输入框，令用户看不清楚实时的输入情况,使界面交互极度不友好。经过查资料终于解决了这个问题。 ...

IOS唤起键盘后--导致页面底部空白问题

Riona_cheng的博客

08-26

3380

微信浏览器中，IOS设备12.0版本经常遇到的一个问题

IOS端收缩键盘或点击键盘右上角完成，输入框失焦会导致元素事件触发点位置偏移

qq_41074373的博客

06-17

3929

document.body && (document.body.scrollTop = document.body.scrollTop);

解决苹果手机中出现input中光标下移（错位）问题

cheng_zhang_zhong的博客

01-19

4932

其中出现这种问题是因为在页面上我们使用了position: fixed;的属性这里我的业务逻辑是点击抢购》》弹出抢购的form表单，这里因为我必须还是要使用position: fixed; 1、解决方案：当弹出弹框的时候，我设置body{position: fixed;},当关闭弹窗的时候将清除body{position: fixed;},样式这样子光标将不会错位。 Vue.js i...

vue中使用vant组件出现软键盘顶起页面——导致事件失效

Smile_ping的博客

03-10

7063

vue中使用vant地址组件页面被顶起问题遇到问题： IOS设备，当前发现有7Plus、iphone11【测试机有限，更新版本设备未测】在vue页面中使用vant地址组件，当操作到详细地址时，软键盘顶起页面往上移动。当软键盘关闭时，页面没有还原。操作页面点击事件时无效，【因页面移动导致位置不对】复现效果图输入收货人时页面展示正常当操作详细地址时会发现，软键盘顶...

IOS移动端页面操作过程中发生位移后焦点错位的问题修正

qq_42118320的博客

12-04

555

问题描述之前开发移动端产品时发现过一个很奇怪的问题，移动端的页面在安卓客户端上操作一切正常，而在IOS客户端，如果页面发生了位移（比如召唤出输入法把页面顶上去了一部分），那么在后面出现有弹框（例如提示框，需要点“确认”按钮）的时候，按钮的焦点会发生位移（原按钮位置点击无效，必须得往上或者往下一段距离才能点得到）。此项目使用的是客户端内嵌页面，页面开发使用的是vue。问题解决针对页面焦点的位移...

解决移动端IOS：input框输入完成，键盘关闭后位置上移问题

qq_41248310的博客

12-31

1452

/** * 解决IOS：input框输入完成，键盘关闭后位置上移问题 */ function fitIos() { var u = navigator.userAgent; var flag; var myFunction; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIO...

vue项目把软键盘收起 input失去焦点

qq_39598092的博客

06-12

2559

html： <input type="text" placeholder="请输入要搜索的内容" v-model="value" @keypress="keyFn" ref="input1"> js: keyFn(e) { if (e.keyCode === 13) {//软件盘上的确认按钮 this.$refs.input1.blur(); } }, ...

vue项目 input标签失去焦点，页面出现空白区域

zax533716144909的博客

08-29

1080

最近在做的是微信抢红包功能微信打开链接的页面中 input标签在失去焦点的时候会出现空白区域（空白区域大小是软键盘大小）需要下拉才能显示完整页面 <input class="num_input" v-model="phone" type="text" placeholder="请输入账号手机/邮箱" @blur="viewRestore"> viewRestore() { ...

使用focusout事件解决IOS键盘收起页面不回弹问题

"本文主要探讨了在iOS设备上开发H5页面时遇到的一个常见问题，即当用户在输入框中输入并关闭键盘后，页面无法正确恢复到键盘弹出前的位置。作者通过详细描述问题的症状、页面结构以及问题分析，提出了解决方案，即...