vue--ios手机input点击手机输入键盘顶起页面解决方案

知秋~

已于 2022-06-14 10:53:08 修改

阅读量4.1k

点赞数

文章标签： ios点击输入框被弹起

于 2019-04-30 09:25:07 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/89703208

版权

<input type="text" placeholder="请填写手机号" maxlength="11" v-model="phone" @focus="getFocus" />
getFocus() {
	$("input").on("blur", function() {
		window.scroll(0, 0);
	});
},

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

知秋~

关注关注

0
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制

高级前端工程师

03-07

3653

uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办

iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案

Justicky

01-18

1万+

一、问题描述：问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。问题2：点击fixed在底部的提交按钮无反应 ...

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

解决vue项目iOS点击两次调起iOS键盘问题

z1010017573的博客

12-31

750

前几天项目碰到个iOS点击输入框轻轻点击输入框调用不起键盘，需要点击好多次才可以。最后在网上查询了好多资料才得以解决。进入正题，第一步查看是否安装了fastclick插件，就是看一下package.json文件有没有。如果么有就安装一下。命令如下： cnpm install fastclick --save 第二步：在main.js文件...

input输入后页面顶上去了 ios_ios兼容 input输入时弹出键盘框页面整体上移键盘框消失后在ios上页面不能回弹的问题...

weixin_32286661的博客

01-17

690

(一)前端h5混合开发手机端ios 当有input输入时，手机下方弹出键盘使页面上移，当输入完成，键盘消失后页面显示回到原位，但实际不能点击(可点击上方区域，有反应)，也就是说实际是没有回弹。解决办法：给input加blur事件，代码如下：$('input').on('blur', function() {setTimeout(function(){var scrollHeight = docu...

vue ios端谈起键盘获取高度

最新发布

weixin_36948901的博客

07-21

137

解决ios手机vue H5页面输入键盘收起后页面回弹到顶部问题

NOIFNOIFNOIF的博客

11-01

3913

1.网上给出的解决方法一般是当软键盘收起时检测输入框失焦，失焦后重新滑动回输入框位置。在 mounted () 内加入如下代码可治标但不治本。 document.body.addEventListener('focusout',()=>{ this.$el.querySelector("#demo").scrollIntoView({ behavior: 'smooth', // 平滑过渡(ios不生效) block: 's.

vue移动app项目中使用flex布局，呼出手机键盘页面被顶起和压缩的问题

闻人放歌的三寸青草园圃

12-05

3993

在移动项目开发中遇到这个问题。原因分析：因为flex布局是根据页面宽高度进行变化的，因此，当底部弹出手机软键盘时，因页面高度变化导致页面因而变化。解决方法：只要知道了原因，那么解决就很简单了。我们只需要在app这个div初始化完成时，获取手机的屏幕高度，并将值赋给height就行了。 App.vue: var height= document.documentElement.clientHei...

解决调起手机软键盘页面被顶到底部再关闭软键盘页面底部留白的问题

qq_39167934的博客

05-08

751

<input type="text" placeholder="请输入联系电话" v-model="phone" oninput="value=value.replace(/[^\d]/g,'')" max...

uniapp nvue 软盘会把页面顶上去，留下空白

zongxingfengyun的博客

08-25

474

1、输入框使用 adjust-position="false" 使输入框不随软盘移动 2、计算软盘的高度，动态赋值给变量 uni.onKeyboardHeightChange((res)=>{ console.log(res) that.boardHeight=res.height }) 记得把这个方法放到onload或其他页面加载就执行的方法中 3、把输入框使用 position: fixed; 顶到软盘的上方这样页面...

vue input点击输入键盘顶起页面解决方案 ios

qq_29444805的博客

06-05

7366

vue ios input点击输入键盘顶起页面解决方案在所有input失去焦点的时候执行window.scroll(0, 0) 在所有input失去焦点的时候执行window.scroll(0, 0) <template> <div><input placeholder="请输入您的手机号" @blur="onBlurInput()"></div>...

项目难点：解决IOS调起软键盘之后页面样式布局错乱问题

Mr.小灰狼_随笔

08-15

2593

项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题

h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案

weixin_39528029的博客

10-25

1039

最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...

Vue移动端点击输入框，弹出键盘，底部被顶起的问题

初辰的博客

07-26

4118

Vue开发中，当我们相对于父视图的底部布局子控件时，需要用positionfixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现，在安卓端会出现。...

vue 解决ios编辑器输入框不能拉起

07-18

292

一、问题描述：Android 、pc、下可以正常使用，在ios下可以拉起输入框但是无法输入 <div contenteditable="true" ></div> 二、解决方法：给div新增以下全局样式 div{ -webkit-user-select:text; height:auto; } div *{ -webkit-user-sel...

移动端解决输入框唤起键盘时将底部导航栏顶起问题总结

简白的博客

12-21

3117

问题描述 vue基于vant框架开发移动端项目时，出现了这样一个问题：在手机上点击页面输入框时唤起手机自带键盘，结果底部固定的导航栏也被顶起，导致遮挡住页面部分内容解决办法这篇文章给出了解决办法解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题我在本地模拟测试了此方法，是可以解决掉底部被顶起问题，但是在我的某一个项目中，此方法并不能完全解决底部导航栏被顶起问题。究其原因，是我的项目中存在tab标签页，并且底部导航栏是被封装为一个通用组件使用的，当键盘被唤起时需要在页面内使用动

uniapp安卓应用，输入法软键盘弹起，窗口顶起，变形解决办法

pdfh5.js的博客

11-29

9049

"app-plus": { "softinputMode": "adjustResize" } softinputMode：软键盘弹起模式，有两个值： adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度 adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住 softinputMod...

vue解决ios微信环境下点击输入框页面被顶起不能自动回弹到底部问题

YanGo的博客

04-22

4652

开发中遇到的这个问题，索性习惯的百度（哈哈），做微信h5页面的相信都有遇到过的，我这里记录一下。听说是微信6.7.4以上，ios12+系统都会有键盘不回弹下面是一位道友的分享，我转发一下：https://blog.csdn.net/YY110621/article/details/87919966 问题效果图：下面灰色部分就是调起系统键盘的时候没有回弹（很丑吧）解决方法: 1....

uniapp软键盘把界面顶起问题解决

defxg的博客

03-07

6774

软键盘

解决uni-app 输入框，键盘弹起时页面整体上移问题