解决ios中input输入时虚拟键盘顶起页面的问题

最新推荐文章于 2023-02-07 14:29:52 发布
最新推荐文章于 2023-02-07 14:29:52 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： ios问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861696/article/details/90770327
版权

mt-field，ios


<mt-field class=“borderBottom borderTop” label=“手机号” placeholder=“请输入手机号” type=“tel” v-model=“formData.phone” @blur.native.capture=“scoll”>
@blur.native.capture="scoll"是mt-filed的失去焦点时触发的事件。

scoll() {
let ua = window.navigator.userAgent;
//获取端口机型
let app = window.navigator.appVersion;
if(!!ua.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)){
var currentPosition,timer;
var speed=1;
timer=setInterval(function(){
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=speed;
window.scrollTo(0,currentPosition);//页面向上滚动
currentPosition+=speed;
window.scrollTo(0,currentPosition);//页面向下滚动
clearInterval(timer);
},100);
}else if(ua.indexOf(‘Android’) > -1 || ua.indexOf(‘Adr’) > -1) {
}
}**

极致的谦虚的深秋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input输入后页面顶上去了 ios_iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案...
weixin_29375669的博客
01-17 1623
一、问题描述：问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。问题2：点击fixed在底部的提交按钮无反应详细描述：遇到...
iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案
热门推荐
Justicky
01-18 1万+
一、问题描述： 问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置 详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。 问题2：点击fixed在底部的提交按钮无反应 ...
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
12-11
前言：微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白 最近微信和ios都有版本升级，不知道是哪边升级造成的，但是经过测试，软键盘收起后，再滚动一下页面，下面的留白就会消失。所以只要在输入完毕后模拟一下这个“滚动”的操作，就能解决问题了。 如果是用vue写的： <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //methods中添加： fixScroll() { window.scrollTo(0, 0); } 因为这个问题只在iOS端出现所以使用前进行一下判断： fixScroll(
ios系统软键盘显示时页面一部分内容被顶上去无法恢复
weixin_43818906的博客
02-07 803
ios系统软键盘显示时页面一部分内容被顶上去无法恢复如何解决
ios键盘弹起页面被顶上去的问题
Edward_Cullens的博客
08-20 2059
1.先在页面顶部写一个input框， 2.在键盘弹起的时候先让事先写好的input框获取焦点，在让被点击的框获取焦点就这样页面就不会被顶上去了
IOS input输入时弹出键盘挤压页面，使页面失去焦点解决方法
一只会喊666的咸鱼的博客
05-06 2194
前端在做手机适配时，通常IOS的适配很麻烦，我之前就遇到一个问题； 在安卓手机上点击input是，手机弹出键盘，页面不会与任何变化； 当苹果手机点击input是弹出的键盘，会将页面往上挤压一段距离，输入完成后，关闭键盘，你会发现页面会出现纵向拉条，之所以出现这个，就是因为键盘弹出使页面受到了一定程度的挤压，所以我们应该 在input失去焦点时将纵向拉条距离顶部的距离归零，但还有一个问题，就是有...
JS html css IOS 苹果手机吊起键盘，页面会被推上去
lunmeifan的博客
02-15 3670
if (navigator.userAgent.toLocaleLowerCase().includes('iphone')) { // @ts-ignore this.intervalFlag = setInterval(() =&amp;amp;gt; { document.querySelector('body').scrollTop = 0; }, 20...
ios input框将页面顶起的兼容问题
Queen-Shir的博客
10-29 324
给input加失去焦点事件，让页面滚动距离为0。 $(".sitter-fee").blur(function(){ window.scrollTo(0,0); });
解决ios调用原生键盘把底部内容往上顶问题
youngeffort的博客
11-16 4637
现象：input表单输入时，调取原生键盘把底部position:absolute;内容往上顶了 问题产生原因：弹出键盘使网页脱离文档流的屏幕高度变小 解决方案： 1、使用常规布局，重新布局被顶内容，放回文档流---比如修改position:absolute;为posution:relative; 2、使用媒体选择器： ​ @media (max-height:535px){ ....
IOS关于UISearchbar作为导航栏的titleview引起切换页面导航栏抖动问题
lrbtony的博客
09-30 1252
今天在开发过程中，突然发现，在两个页面push与pop之间，会发生抖动。虽然这个问题不大，但是作为强迫症，还是要给用户最好的体验的。 经过一番排查，发现跟里面页面内容完全无关，进而排除到11的滑动页面适配兼容问题。此时，我的目光聚焦到第一个页面与第二个页面的导航栏的差异。经过一番高度输出，才抓出问题的元凶，就是uisearchbar作为导航栏的titleview的时候，引起的问题。 原来，在iOS 11里，在导航栏直接设置searchbar为titleView，由于searchbar本身的圆角效果，会导
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
IOS开发中键盘输入屏幕上移的解决方法
09-01
在IOS开法中经常会遇到键盘遮挡屏幕的事情，经常档住下面的按钮，下面小编给大家分享IOS开发中键盘输入屏幕上移的解决方法，感兴趣的朋友一起看看吧
IOS上点击输入框后弹出键盘后，页面被顶上去，无法恢复问题。
weixin_45152159的博客
07-25 1633
ios中，键盘的弹起，页面会整个网上顶，键盘隐藏页面会下挪恢复原状，但是实际位置还是在被顶上去的地方，不会自动恢复。 <script> var u = navigator.userAgent, app = navigator.appVersion var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $(...
基于springboot+vue+MySQL实现的在线考试系统+源代码+文档
06-01
web期末作业设计网页 基于springboot+vue+MySQL实现的在线考试系统+源代码+文档
318_面向物联网机器视觉的目标跟踪方法设计与实现的详细信息-源码.zip
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
FPGA Verilog 计算信号频率，基础时钟100Mhz，通过锁相环ip核生成200Mhz检测时钟，误差在10ns
06-02
结合等精度测量原理和原理示意图可得：被测时钟信号的时钟频率fx的相对误差与被测时钟信号无关；增大“软件闸门”的有效范围或者提高“标准时钟信号”的时钟频率fs，可以减小误差，提高测量精度。 实际闸门下被测时钟信号周期数为X，设被测信号时钟周期为Tfx，它的时钟频率fx = 1/Tfx，由此可得等式：X * Tfx = X / fx = Tx(实际闸门)。 其次，将两等式结合得到只包含各自时钟周期计数和时钟频率的等式：X / fx = Y / fs = Tx(实际闸门)，等式变换，得到被测时钟信号时钟频率计算公式：fx = X * fs / Y。 最后，将已知量标准时钟信号时钟频率fs和测量量X、Y带入计算公式，得到被测时钟信号时钟频率fx。
校园二手商品交易系统三.wmv
06-02
校园二手商品交易系统三.wmv
基于Spring Security的OAuth2.1和OIDC1.0认证服务器设计源码
06-02
本源码提供了一个基于Spring Security框架的OAuth2.1和OIDC1.0认证服务器实现。项目包含102个文件，主要使用Java（51个文件）、JSP（12个文件）、XML（10个文件）、HTML（9个文件）等编程语言和标记语言开发。此外，还包括了properties、txt、ddl、css、ico等格式的文件。这个认证服务器项目旨在实现现代的身份验证和授权机制，支持OAuth 2.1和OpenID Connect 1.0协议，适用于需要在应用程序中实现安全认证的开发者。
pd34.py111111111111111
最新发布
06-02
pd34.py111111111111111
ios css 弹出软键盘 输入未弹起
08-06
在iOS设备上，使用CSS弹出软键盘的行为是由设备的操作系统控制的，...总之，在iOS设备上，CSS无法直接控制软键盘的弹起，但可以通过调整页面布局、使用JavaScript或设置元素的样式属性来解决软键盘遮挡输入框的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值