解决移动端ios输入框输入后不复原

最新推荐文章于 2023-08-15 05:00:00 发布
最新推荐文章于 2023-08-15 05:00:00 发布
阅读量144 收藏
点赞数
分类专栏： vue html5 文章标签： html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37493515/article/details/117386710
版权
vue 同时被 2 个专栏收录
16 篇文章 1 订阅
订阅专栏
html5
12 篇文章 0 订阅
订阅专栏

利用html中的meta标签和viewport解决

    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

vue的话直接在public文件夹下的index.html文件中引入
html文件在当前页面引入

不懂老爱瞎逼逼
关注
专栏目录
iOS测试之移动端测试用例设计总结
甫式人生
08-29 4214
一、安装/卸载1、真机上安装、卸载、高版本覆盖安装、低版本覆盖安装、卸载后安装高版本； 安装关注点：版本号、渠道号、数字签名（用抓包工具辅助查看）、安装成功后启动向导、安装过程中对意外情况的处理（取消、死机、重启、断电、内存不足、断网）、安装进度条、主要功能流程； 卸载关注点：卸载过程中的意外情况处理（取消、死机、重启、断电、内存不足、断网）、卸载进度条； 2、第三方软件协助安装、卸载、高版本覆盖安
如何做一个听话的 “输入框”
大转转FE
01-26 1571
前言在移动端的web开发中，一提起输入框，程序猿（媛）肯定有很多可以吐槽的点。在输入框的运用中，小编也是很心累呀~不过，经过我 潜（cai）心（keng）研（jiao）究（xun），也算是了解了它的脾性... ...  特别鸣谢：周涵，家兴等正文这里开始 ? — — — — — — — —问题探究1. ios中，输入框获得焦点时，页面输入框被遮盖，定位的元素位置错乱：当页input存在于吸顶或者吸
Vue+Element-UI开发问题解决：如何表单验证；输入框失去焦点还有错误信息
zxh_log4j的博客
02-01 4845
Vue+Element-UI的表单验证，注意的点有以下： ref ：该属性相当于一个id，可以获取该表单对象 model ：不设置该属性，失去焦点后错误消息还会继续存在 rules ：绑定校验的规则 prop ：关联规则设置的属性 Vue实例： var vue = new Vue({ el: '#app', data: { //表单数据 formData: {}, //校验规则
vue项目把软键盘收起 input失去焦点
qq_39598092的博客
06-12 2558
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 1079
最近在做的是微信抢红包功能 微信打开链接的页面中 input标签在失去焦点的时候会出现空白区域（空白区域大小是软键盘大小） 需要下拉 才能显示完整页面 <input class="num_input" v-model="phone" type="text" placeholder="请输入账号手机/邮箱" @blur="viewRestore"> viewRestore() { ...
IOS手机唤起键盘，输入框失去焦点后页面元素点击事件位置偏移
weixin_41587194的博客
09-05 2317
移动端页面中如果有input框，在IOS手机中，当唤起系统键盘输入数据完成后，再去点击页面其他元素，会发现点击位置偏移的问题，这是因为在IOS系统中唤起键盘后页面向上滚动了一段距离。这就需要我们在input框失去焦点时取消页面的滚动距离window.scroll(0,0);这个方法可以解决此问题 ...
【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题
Weiqian_的博客
04-13 4172
IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题解决思路
ios系统输入框光标错位问题
weixin_30825199的博客
04-19 1821
原文出自：http://www.cnblogs.com/zml-mary/p/7816495.html qa测试手机升级以后弹框输入光标出现错位现象，前两天由于时间紧迫，一直没有找到好的解决方案，今天一天都在解决这个bug问题，临近下班终于算比较好的解决这个问题，觉得有必要理理~ 引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性posi...
项目难点：解决IOS调起软键盘之后页面样式布局错乱问题
最新发布
Mr.小灰狼_随笔
08-15 2569
项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题
APP移动端测试
sinat_41739591的博客
03-15 3295
软件测试的所有技术、方法、流程适用于任何类型、任何平台的软件的测试工作。 1)软件类型上: Web 系统。有界面，有代码，所以白盒、黑盒测试都要做;因为有按钮、 文本框.所有等价类、边界值……所有的用例设计方法都要用;因为不是一个人开发的、也不是一天开发的、更不是一个简单的软件和应用，所以．单元测试、集成测试、系统测试…都要进行。同理．手机APP也要如上进行测试。同理. PC端的安装软件也如上进行测试;甚至于术程序〔微信、支付宝、百度〕也需要如上进行测试。 ...
移动端软键盘遮挡问题
shenwen5225的博客
01-21 1049
文章目录scrollIntoView 介绍防遮挡具体使用利用 scroll 实现防遮挡 scrollIntoView 介绍 移动端的H5页面，当输入框元素获取焦点时，会吊起软键盘，如果输入框被软键盘遮挡了，则页面会发生滚动使输入框显示在可视区。浏览器这种默认处理机制在元素设置了绝对定位或设置了html,body{height:100%;}时可能会失效，通常需要手动处理。 防软键盘遮挡的处理思路： ...
Vue项目根治IOS微信web中，输入项blur之后页面不回落的问题
warmbook的博客
02-27 1710
向大佬们偷师那么多技能后，终于我也能装一回大佬了！第一次发帖，有点激动，哈哈哈哈！ 如题，不知道这个问题困扰各位WEBer多久了，反正我是跟它纠缠两三年了，最近开始真正学一下前端（本人赤脚医生，见笑了），终于找到了在Vue下彻底解决的方案，废话少说，先上代码： // 注册Vue全局指令 Vue.directive('wx-blur-bug',{ bind:function(el){ //在绑定...
移动端输入框的踩坑之旅
u014620815的专栏
06-14 398
坑一论如何填坑坑二坑三##
vant的表单点击其他输入框输入的值会消失_如何设计出“让用户高效使用”的表单？...
weixin_31572321的博客
01-28 1782
笔者针对不同类型的表单做了可用性测试与分析后，得到了有助于用户高效使用的表单设计要点，希望内容对你有所启发。我们一直想研究表单中标签如何放置才能让用户带来好的体验，所以我们借助眼动仪对不同种类的表单进行了可用性测试与分析，期间我们发现了很多有趣的数据，以下是我们对数据的详细分析。在大家详细阅读前，我们先说明下此次测试搭建的环境是一个有别于真实情况的、临时的，因为我们需要正确的测试视觉跳动...
双向数据绑定实现原理
06-27 262
vm的核心是view 和 data 当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变 而view 发生改变则是通过底层的input 事件来进行data的响应更改 　　 双向数据绑定实现原理 用到了input...
**如何解决ios点击输入框后键盘弹起，键盘收起后，输入框不恢复原位置，页面不能回弹导致下方有空白，弹框的确定按钮不能点击**
weixin_45373521的博客
10-29 640
1.给input框添加blur事件 <input type=“text” placeholder=“手机验证码” maxlength=“4” v-model=“validationCode” @blur=“inputBlur”> 2.在input框失焦后，先判断当前设备的系统是安卓还是ios inputBlur(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.indexOf(‘android’) > 0) { do
由Vant Field组件得到解决IOS输入框 键盘上推问题
不才的博客：https://www.notbucai.com/
06-04 4551
前言 前几天公司让写一个客户数据入录页面（就是个带了logo的表单页面），就直接选择用原生的直接上，原以为也就个把小时的事情（确实个把小时就写完了），但是测试发现ios（没有测试多个，至少qq浏览器会）会输入的时候导致页面上推严重影响用户体验。 可直接转第三部分 由开源库找到方案 Vant Field组件 通过看源码发现Field在blur事件时候会执行一个滚动事件 贴代码：reset-scroll.ts // reset-scroll.ts import { isIOS as checkIsI
iOS-监听键盘输入,视图整体上移或恢复-避免输入遮挡
极客学伟的技术分享社区
03-08 3856
1.初始化输入框,监听输入框开始编辑和结束编辑//密码输入框 UITextField *loginInputPasswordStr = [UITextField inputTextWithImage:[UIImage imageNamed:@"Password"] placeholderText:NSLocalizedString(@"Password", nil)]; loginI
移动端键盘收起，页面没能恢复原状的解决方案
莹莹同学
12-06 878
// 优化移动端键盘收起时页面没能恢复原状的问题 let inputs = document.getElementsByTagName('input'); let timer = null; for (let input of inputs) { input.addEventListener('blur', function() { timer = setTimeout(() => { window.scrollTo(0, 0);
iOS自定义聊天输入框实现与代理方法详解
本文档详细介绍了如何在iOS应用中实现一个自定义的聊天输入框功能，以满足日常聊天场景的需求。作者从个人经验出发，分享了实现过程中的关键步骤和技术细节。 首先，开发者需要在视图控制器(View Controller, VC)的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值