vue el-input输入框禁止输入空格

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量1w 收藏 22
点赞数 9
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39960204/article/details/124410646
版权

vue el-input输入框禁止输入空格

v-model.trim
<el-input v-model.trim="input" placeholder="请输入内容"></el-input>

这个方法不仅可以禁用空格，还可以禁用 type=“textarea” 时的回车


@onkeyup
<el-input type="textarea" v-model="input" :onkeyup="input= input.replace(/[ ]/g,'')"></el-input>

这个方法就比较灵活，通过按键松开时匹配正则表达式来去掉输入的空格；理论上也可以用来禁用其他字符，正则没写错应该都可以实现



下面博客中还有 @keydown.native 方法；本人没有测试，如果上面两种方法都不满足，可以看下

参考博客

https://www.jianshu.com/p/3e0c8b0903f6

白龙菜牛
关注
  • 9
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中输入框禁止输入空格
weixin_53592107的博客
12-16 7807
一，使用修饰符.trim trim修饰符：他是v-model的一种修饰符。可以过滤掉内容左右两边的的空格代码如下： <el-input type="test" v-model.trim="userNameInput></el-input> 二，使用正则表达式 可以通过input事件来验证输入的内容是否有空格 1，输入框 /*keyup.native是回车事件*/ <el-input type="test" @keyup.native="getDataListS" v-mod
input输入框禁止输入但可以选择
m0_57712926的博客
08-23 3335
目录前言一、需求二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、需求 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd impor
el-input输入框校验
12-09 4606
使用trim修饰符，它是v-的一种修饰符，可以过滤掉内容左右两边的的空格代码。
vue input 如何限制输入框输入空格
weixin_43858851的博客
05-19 1982
vue input 如何限制输入框输入空格
Vue 应用中确保所有输入框都禁止输入空格
虾球关东煮
06-06 250
指令的输入框都将自动阻止用户输入空格。这种方法的好处是你可以轻松地将这个指令应用到你的 Vue 应用中的任何输入框上，而无需为每个输入框单独编写事件处理逻辑。由于应用中有七百多个input控件，不太可能一个个添加@input方法，所有得创建一个可复用的指令来实现这个功能。领导突然来了要求，需要在vue应用中禁止填入空格，以防止用户在复制粘贴其他文档内容时复制了多余的空格。VSCode里批量将
el-input 不允许输入空格
南湖小皮的博客
04-22 500
需求： 在使用el-input时不允许使用空格 <el-input v-model.trim="data"></el-input>
input 输入 限制 大全
web全栈开发的博客
11-30 7470
1、只能输入数字 <el-input onkeyup="value=value.replace(/[^\d]/g,'')"></el-input> 收集中…
el-input输入框限制及常用的校验规则
@LiuStrong
03-14 1145
el-input数字类型的各种校验，直接复制粘贴看效果。
el-input输入校验不能为空格，不能输入全部为空的内容
鹤渺的星球
01-06 7176
输入框的校验太常见了，基本上常见的为：不能为空，不能输入空格，和不能输入全部为空的内容。这里对这个进行记录。
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
vue-input-tag：Vue.js 2.0输入标签组件
02-06
import InputTag from 'vue-input-tag' Vue . component ( 'input-tag' , InputTag ) CDN < script src =" https://unpkg.com/vue " > </ script > < script src =" ...
element中input提交时提示input不能为空
weixin_52890961的博客
07-08 7011
最近根据需求完成表单提交按钮（方便自己以后使用） 只有代码 首先表单prop，ref 都要保持一致 <el-form :model="form" ref="formData" :rules="rules"> <el-form-item label="实际停电时长" :label-width="formLabelWidth" prop="powerCutTimeActual"> <el-input v-model="form.pow
Input框禁止输入空格，小数，正负数，整数限制
weixin_48419726的博客
10-18 3182
input框禁止输入空格限制
elementUI中input框无法输入与禁止输入空格
細水、長流√的专栏
03-02 3936
使用原生input标签自带的keyup事件监听方法。3、使用element UI 的表单验证功能。1、使用vue框架中的.trim修饰符。
(vue2)input框禁用空格
nyf_unknow的博客
02-01 784
【代码】(vue)input框禁用空格。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 324
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
el-input-number限制只能输入正整数不可输入空格字母那些
05-31
您好，要实现 el-input-number 只能输入正整数并且不能输入空格和字母，可以使用以下方法： 1. 设置 el-input-number 的属性 controls-position 为 right，使得输入框右侧出现控制器按钮。 2. 设置 el-input-number 的属性 min 和 step 为 1，使得输入框每次增加或减少的值为 1。 3. 使用正则表达式 /^[1-9]\d*$/，限制只能输入正整数。 4. 使用事件监听器 onkeydown 和 oninput 监听键盘输入和粘贴事件，通过正则表达式和字符串的 replace 方法过滤掉非数字字符。 以下是示例代码： ```html <template> <el-input-number v-model="value" :controls-position="controlsPosition" :min="1" :step="1" @keydown="onKeyDown" @input="onInput" ></el-input-number> </template> <script> export default { data() { return { value: '', controlsPosition: 'right' } }, methods: { onKeyDown(event) { // 过滤非数字字符 if (event.key !== 'Backspace' && event.key !== 'Delete' && !/^\d$/.test(event.key)) { event.preventDefault(); } }, onInput() { // 过滤非数字字符 this.value = this.value.replace(/[^1-9\d]/g, ''); } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值