vue中input框输入2位自动产生一个空格

最新推荐文章于 2023-08-08 19:34:18 发布

13xs

最新推荐文章于 2023-08-08 19:34:18 发布

阅读量309

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_34739614/article/details/128617954

版权

<input placeholder="填写序列号" v-model="number"/>
watch: {
  number(val) {
    this.$nextTick(() => {
      console.log(val.replace(/\s/g,'').replace(/..(?!$)/g,'$& '))
    });
  }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

13xs

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中input框输入2位自动产生一个空格

【代码】vue中input框输入2位自动产生一个空格。
复制链接

扫一扫

vue利用自定义指令全局去除el-input框前后空格

蜗牛~~

03-13

5895

当用户输入的时候，我们需要自动去掉输入框两边的空格，注意，中间是能输入空格的。此时我们利用全局自定义指令实现对el-input的只去除首尾空格的需求。1、在directive文件夹下创建一个trim文件夹。2、index.js文件。

vue +element ui input框 type=”textarea“时，输入值，enter键触发，会自动添加空格问题（使用trim去掉首尾空格）

蓝胖子的博客

10-27

2507

（使用trim去掉首尾空格） vue +element ui input框 type=”textarea“时，输入值，enter键触发，会自动添加空格问题

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

vue 隔四个字符加一个空格

qq_35461048的博客

01-07

883

{{ item.name.replace(/(\d{4})(?=\d)/g, '$1 ') }}

（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位

qq_41297968的博客

08-30

3991

（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位直接看效果：对于输入框输入银行卡号每个4位自动增加一个空格，看了很多小伙伴写的都存在各种各样的小问题，最明显的就是光标错位（输入完成后，再回去修改中间的，光标自动跑到最后面）。后面决定手撸一个。代码如下： html: <input v-model="testData" @input="formatCardNumber" ref="cardInput" /> js: data() { return {

【 Vue 】Vue输入多个空格

CharlynYanyan的博客

06-27

1675

Vue输入多个空格

vue判断input输入内容全是空格的方法

08-27

这里，我们将深入探讨如何在Vue中判断一个input元素的输入值是否全由空格组成。首先，我们需要理解Vue中的数据绑定机制。Vue采用的是双工绑定（Two-way binding），这意味着我们可以直接在Vue实例的`data`对象中...

vue中Element-ui 输入银行账号每四位加一个空格的实现代码

12-29

我们在输入银行账号会设置每四位添加一个空格，输入金额，每三位添加一个空格。那么，在vue，element-ui 组件中，如何实现呢？二、效果图：三、实现代码：银行账号> <el-input type=text maxlength=23 ...

vue表单验证之禁止input输入框输入空格

01-18

刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端和移动端事件不一样，所以如果你是pc端，可以...

vue 输入电话号码自动按3-4-4分割功能的实现代码

11-21

input class="inputBox" type="phone" placeholder=" 请输入手机号" maxlength="13" v-model="phoneNum"/> 监听事件，每次号码发生改变时触发大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果...

vue使用插值语法渲染字符前后莫名加上空格

qq_41549657的博客

04-11

1236

错误写法 <span> {{true?'，':''}} <a>test</a> </span> 这种写法渲染结果如下：会把换行符渲染成空格正确写法 <span>{{true?'，':''}}<a>test</a></span> 渲染结果如下： ...

Connection to Python debugger failed: Socket operation on nonsocket: configureBlocking

hemengge的博客

10-13

2155

前一秒pycharm debug还没有任何问题，突然就不能debug了。报错如下： Connection to Python debugger failed: Socket operation on nonsocket: configureBlocking 解决方法：

vue去掉所有输入框两边空格，封装指令去空格，支持Vue2和Vue3，ElementUI Input去空格

热门推荐

仰望星空

05-23

3万+

从键盘数入一个字符串，要求在输入的字符串中每两个字符之间插入一个空格，如：原串aabbcc，要求输入的新串为a a b b c c。此题要求用函数调用实现，且要求用指针变量作形参。#include<stdio.h> #include<ctype.h> void Insert(char *p) { int i; /*结束为止应该在1位置，下标从0开始*/ f...

输入2个正整数A，B，求A与B的最大公约数。 Input 2个数A,B，中间用空格隔开。(1<= A,B <= 10^9) Output 输出A与B的最大公约数。

phperHe

01-30

5215

思路：先得到连个数A,B 他们是同一行输入，注意处理数据然后就算最大公约数根据我们数学求公约数的方法可知，就是用一个数去除另一个数不用担心输入的数字大小顺序，就算得到的第一数字比第二个数字小，经过第一次求余换值之后就可以变成第一数大第二个数小了如4 10经过第一步之后会变成求10 4 的最大公约数 ------------------------------------

Vue 字符串中加多个空格

wangooo的博客

06-25

9728

在字符串中添加字符，添加的空格的字符是："\xa0"，即 \u00A0 不间断空格\u00A0 let sepDot = '\xa0 • \xa0'; 三种空格unicode （ \u00A0，\u0020，\u3000 ） 1.不间断空格 \u00A0 2.半角空格(英文符号) \u0020，代码中常用的 3.全角空格(中文符号) \u3000，中文文章中使用 ...

Vue / Html 等前台中连续多个空格只显示一个空格的解决方法

Jay的个人博客

12-19

3719

Vue / Html 等前台中连续多个空格只显示一个空格的解决方法. white-space的简单介绍。

VUE 项目去除 input 框值所有空格

weixin_52703987的博客

05-24

3万+

去除空格的方法 str.trim(); //去掉首尾空格 str.replace(" ",""); //去除所有空格，包括首尾、中间 str.replaceAll(" ", ""); //去掉所有空格，包括首尾、中间 str.replaceAll(" +",""); //去掉所有空格，包括首尾、中间 str.replaceAll("\\s*", ""); //可以替换大部分空白字符，不限于空格正则： str.replace(/\s*/g,"") str.replace(/\ +/g, "");

vue中的空格(总有一个适合你)

az44yao的专栏

05-29

1385

文：https://www.jianshu.com/p/b6b976680b4c  == 普通的英文半角空格  == == == no-break space （普通的英文半角空格但不换行） 　== 中文全角空格（一个中文宽度）  ==&ensp;== en空格（半个中文宽度）   ==&emsp;== em空格（一个中文...

vue中input框中的电话号码，输入后前3位空格一位，后面的每4位空格一位

06-06

跟上面的纯 JavaScript 实现方法类似，我们可以在 Vue 中通过 `v-model` 和触发 `@input` 事件来实现输入电话号码时，前三位空格一位，后面每四位空格一位的效果。下面是一个例子： ```html <template> <div> <input type="tel" v-model="phoneNumber" @input="formatPhoneNumber" placeholder="请输入电话号码"> </div> </template> <script> export default { data() { return { phoneNumber: '' } }, methods: { formatPhoneNumber() { // 去除输入中的空格 let phoneNumber = this.phoneNumber.replace(/\s/g, ''); // 根据长度添加空格 if (phoneNumber.length > 3) { phoneNumber = phoneNumber.slice(0, 3) + ' ' + phoneNumber.slice(3); } if (phoneNumber.length > 8) { phoneNumber = phoneNumber.slice(0, 8) + ' ' + phoneNumber.slice(8); } // 更新输入框的值 this.phoneNumber = phoneNumber; } } } </script> ``` 在上面的代码中，我们通过 `v-model` 绑定了一个 `phoneNumber` 变量，当用户在输入框中输入电话号码时，该变量会被更新。同时，通过 `@input` 触发 `formatPhoneNumber` 方法，实现了电话号码自动格式化的效果。需要注意的是，在 Vue 中使用 `v-model` 绑定输入框的值时，Vue 会自动将输入框的值和数据模型中的值进行双向绑定，这样当数据模型中的值被修改时，输入框的值也会自动更新。因此，在 `formatPhoneNumber` 方法中，我们直接更新了数据模型中的值，而不是直接修改输入框的值。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交