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

最新推荐文章于 2022-11-14 19:49:21 发布

zax533716144909

最新推荐文章于 2022-11-14 19:49:21 发布

阅读量1k

点赞数

文章标签： vue 页面空白 input

本文链接：https://blog.csdn.net/zax533716144909/article/details/100140021

版权

最近在做的是微信抢红包功能微信打开链接的页面中 input标签在失去焦点的时候会出现空白区域（空白区域大小是软键盘大小）需要下拉才能显示完整页面

<input class="num_input" v-model="phone" type="text" placeholder="请输入账号手机/邮箱" @blur="viewRestore">
 viewRestore() {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zax533716144909

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

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

zxh_log4j的博客

02-01

4876

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

vue input输入框聚焦和失焦时内容处理

热门推荐

onlylele的博客

12-05

1万+

input输入框聚焦时，如果内容为0，让其置空处理；如果内容为空，在失焦时，让其为0处理； html: <input class="input-small-mt" @focus="focusPrice($event)" @blur="blurPrice($event)" v-model="i.purchase_price" type="text" /> js: //文本聚...

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

vue中input失去焦点时验证输入的数据是否存在

qq_29124867的博客

01-08

3210

做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验输入的数据是否存在 1、给表单加:rules="rules"，并且在data里面设置rules rules: { name:[{required: true,message: '该项为必填项'}, {trigger: 'blur',validator: checkValueNameIfExist} ], } 2、定义checkValueNameIfExist，并调用验证方法。 .

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

qq_39598092的博客

06-12

2576

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

需求：当输入框失焦时，判断输入框是否为空。如果不为空，则修改为当前输入框的值；如果为空，则提示错误信息，且保持原值。

前端小白菜的菜园子

07-28

709

需求：当输入框失焦时，判断输入框是否为空。如果不为空，则修改为当前输入框的值；如果为空，则提示错误信息，且保持原值。 onBlur={()=>{ if(!this.state.name){//如果state中的name为空 this.setState({ name:project.name //将state中的name设为project.name（原值） }); viewStore.errorOnce( currentLanguage.get("错误提示信息") )

移动端H5 input输入完成后页面底部留白问题

w候人兮猗

05-21

2644

说明最近在用vue写几个H5页面在微信上展示，遇到一个在弹窗上input输入完成之后点击键盘的完成，页面底部留出一片空白的问题出现原因分析当键盘抬起时，window.scrollY会从0变到键盘的高度，所以解决办法就是当input失去焦点的时候，将window.scrollY重新设置为0 解决给所有的input``textarea组件设置获取焦点和设置焦点事件，失去焦点的时候将...

vue通过指令(directives)实现点击空白处收起下拉框

10-17

在本篇文章中，我们将探讨如何利用Vue的自定义指令实现一个实用的功能：点击页面空白区域时收起下拉框。这个功能在很多交互场景下都非常常见，比如搜索框、菜单等。首先，我们需要理解Vue的自定义指令是什么。Vue...

Vue中div contenteditable 的光标定位方法

10-18

在Vue.js框架中，我们经常需要创建可以编辑的富文本界面。为了让用户在div元素中输入内容，我们可以给这个div元素添加`contenteditable`属性。...希望上述内容对使用Vue开发项目的读者们有所帮助。

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

一键写代码的博客

07-02

1376

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

Vue项目知识点总结，包含基础，Vue2实践揭秘

qq_45163356的博客

08-30

477

第一章：例说Vue.js $ npm i vue-cli -g 首先，在组件脚本定义中使用data定义用于内部访问的数据模型： export default { ... data () { return { title: "vue-todos" } } } data可以是一个返回Object对象的函数，也可以是一个对象属性，也就是说，可以写成以下的方式： export de

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

asdfgh0077的博客

11-25

314

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

【Vue】14.解决微信浏览器input关闭键盘后导致页面底部空缺的问题

返璞归真

01-26

4951

最近在做移动端vue项目的时候遇到了一个这样的一个问题，当我点击input框输调起手机软件盘输入内容以后，关闭软键盘，页面没有回到底部，导致底部出现了空白，手动往下滑动一下，页面才会恢复正常，当关闭软键盘的时候，页面不会自动回到底部。我是flex的布局，目前Android和Ios上都有这个问题网上查了一下，是微信webview打开我们h5页面的时候，就固定了页面的高度，如果这个input在...

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

weixin_41587194的博客

09-05

2340

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

el-input输入框的空格问题

qq_41893334的博客

01-28

3653

技术栈：vue + elementui 需求：在表单中，输入的内容要去除两端空格 1.允许输入空格 2.输入空格后表单非空验证不通过解决方式1：使用v-model的指令修饰符.trim(缺点：不能输入空格，不满足需求) 解决方法2：使用blur方法在失去焦点时进行trim（） <el-form ref="form" :model="formData" :rules="formRules" style="width:80%;margin-top:20px;"

vueElementplus,使用nextTick获取input的focues，2022/6/10pm

xumengxia的博客

06-10

418

调用nextTick

vue 自定义指令input表单的数据验证

weixin_30781631的博客

06-21

741

一、代码 <template> <div class="check" > <h3>{{msg}}</h3> <div class="input"> <input type="text" v-input v-focus><span>{{ms...

input 失去焦点键盘空白解决

嘿喵财运旺旺

11-14

863

这个问题是手机输入法是第三方输入导致，例如百度输入法、搜狗，ios会有不同版本导致。解决办法是全局监听失去焦点事件。

input框输入之后变成空白的情况

wanggouxuan的博客

02-17

1882

今天遇到一个怪事，第一次在input框里面输入的时候没有错误，但是第二次的时候显示了下拉框，然后点击了一下，结果变成了空白在直接点了下拉框里面的数字之后，居然变成了这个样子找了很长时间也没有发现是什么原因导致的，最后想到一个办法，可以把这个下拉框去掉于是找到了这个方法： autocomplete="off" 这个属性是控制下拉框是否开启的如果是off就是关闭的，默认是开启的 ...

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

qq_37493515的博客

05-29

158

利用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文件在当前页面引入 ...

vue中input失去焦点事件