el-input输入框的空格问题

已于 2022-06-19 11:36:44 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue.js elementui javascript
于 2021-08-17 22:54:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45055165/article/details/119768130
版权

技术栈：vue + elementui
需求：在表单中，输入的内容要去除两端空格
1.允许输入空格
2.输入空格后表单非空验证不通过

解决方式1：使用v-model的指令修饰符.trim(缺点：不能输入空格，不满足需求)
解决方法2：使用blur方法在失去焦点时进行trim（）

 <el-input 
        v-model="formData.moduleId" 
        @blur="formData.moduleId=$event.target.value.trim()"
再好能是***嘛！
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue用elementui写form表单时,在label里添加空格操作
10-14
此外，我们还提及了如何在Element UI的输入框`el-input`中添加字体图标。Element UI 提供了两种方式来添加图标：`prefix-icon`和`suffix-icon`。这两个属性分别用于设置输入框前后的图标。 例如，如果我们要在搜索...
El Inputte for .NET---最新标准的输入界面控件
03-16
通过规定的表现方式，自动去除不必要的空格；当设定一组文字列表（如：参加/不参加/未定）后，输入是可以用Spin按钮选择。 基本技术： 方便的格式设定 利用特定的输入格式对客户输入进行一定的限制和引导 ...
解决input输入的是空格问题
UserGuan的博客
12-24 5174
<el-input v-model="form.reason" type="textarea" placeholder="请输入理由"/> this.form.reason.split(' ').join('').length === 0 this.form.reason.split(' ').join('').length === 0的意思是先以空格拆分成数组，再拼接起来，最...
Input输入框过滤空格方法
热门推荐
lyclyc_的博客
04-29 1万+
前端中判断input输入框是否输入是否有空格，实现过滤输入前和输入后的空格， v-model.trim用于去掉输入框内首尾空格 如下绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的， <el-input type="text" v-model.trim="test00" ></el-input> 如果判断Input输入框是否为空，不为空时再提交，可以用 If(this.inputData.trim().length !==0){
el-input自动去掉空格，vue项目全局使用
最新发布
m0_46229755的博客
06-07 286
el-input自动去掉空格，vue项目全局使用
input框禁止输入空格
weixin_43657954的博客
12-29 2174
禁止输入空格
el-input输入的密码不能包含空格的正则表达式
migexiaoliang的博客
03-14 1235
el-input输入的密码不能包含空格的正则表达式。element-ui 密码框显示小眼睛，点击可查看密码。我们在设置密码的时候，不管在首尾还是中间都不允许有空格的，.trim仅仅可以去除首尾空格，当在中间加空格的时候没办法知道，这时候便需要正则来校验提醒用户。
输入框input（element-ui、antd)中el-input组件只能输入数字(空格无效)
agua001的博客
08-10 6536
input标签或者el-input标签 <input type="text" placeholder="请输入手机号" class="search_txt" v-model="searchPhone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"> <el-input v-model="searchForm.phone" placeholder="请输入手机号" maxlength="11" oninput = "
vue中el-input绑定键盘按键(按键修饰符)
11-20
Element-UI中的`el-input`组件是用于创建输入框的自定义组件，它封装了一些内置功能，比如自动补全、清除按钮等。然而，当我们尝试直接通过键盘事件监听器（如`@keyup`）来捕获键盘事件时，可能会遇到问题。 在Vue...
vue判断input输入内容全是空格的方法
01-19
比如input中的数据和data中的msg双向绑定。 那么我们可以 判断先把msg以空格...以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
elementui全局去掉输入框前后的空格
weixin_53504747的博客
04-08 2254
1.先创建一个el-components.js文件 import Vue from 'vue' import ElementUI from 'element-ui'; /** * @MethodAuthor: YuanZheLi * @Date: 2022-01-10 15:27:00 * @Description: 统一格式化去除input首尾空格 */ Vue.component('el-input', { extends: ElementUI.Input, created() {
输入框限制输入空格
qq_54262985的博客
06-06 249
$("input").keydown(function(){ if(event.keyCode==32){ returnfalse } })
vue+elementUI 不验证input中输入空格问题
wjw_de_java的博客
02-26 1537
element中自带的表单必填项校验不能去除空格，此时若输入空格，required: true验证还是可以通过。若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。但v-model.trim只适应字符中间没有空格的情况，若字符中间需要空格就有问题 一、未加.trim（） <el-form :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input size=
在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效
細水、長流√的专栏
03-02 1164
修饰符，得到的内容是去除了前后空白的，但是在输入数据的时候没法按空格键输入空格，这让录数据的人非常难受。分析不能输入空格的原因就是，element的input框不支持。版权声明：本文为CSDN博主「Yongqiang Chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。在vue项目里使用element ui组件库，你会发现使用element的input框，如果在。v-model上加.trim。
Vue Element 去除input前后空格
琅枫的博客
07-07 3557
vue 去除前后空格trim
element文本框限制输入空格
一枚小趴菜(´▽`)ﾉ
08-25 408
qwq
vue el-input输入不了数据
iang_520的博客
11-18 182
vue el-input输入不了数据
解决input框中的空格问题
MyName469的博客
11-29 4950
解决input框中的空格问题为何要解决input框输入空格的问题解决input中的空格常用的方式通过.trim()来解决，会在获取到字符串之后把两头空格删除通过匹配正则表达式来实现空格的消除通过正则校验的方式有很多种，一般来说主要是监听键盘事件和input框的改变以上几种方式虽然可以杜绝用户在input框中输入空格，但是无法显示用户通过鼠标点击粘贴，粘贴到input中的空格 为何要解决input框...
element-plus: dropdown + input的大坑
qq_29517595的博客
05-08 880
element-plus dropdown + input的大坑，dropdown-item阻断keydown
el-input禁止空格
07-28
在Vue中，可以使用v-model.trim指令来禁止el-input输入框输入空格。\[1\] 例如，可以将v-model.trim应用于el-input组件的v-model属性，如下所示： ```html <el-input type="text" v-model.trim="input"></el-input> ``` 这样，当用户在输入框中输入内容时，前后的空格将被自动删除，从而禁止输入空格。\[2\] 如果你想要禁止输入框中的所有空格，包括中间的空格，你可以使用正则表达式来替换输入框中的空格。例如，你可以在el-input组件上使用@onkeyup事件监听器，并在事件处理函数中使用正则表达式将空格替换为空字符串，如下所示： ```html <el-input type="text" v-model="input" @keyup="input = input.replace(/\s/g, '')"></el-input> ``` 这样，无论用户在输入框中输入的是前后空格还是中间空格，都会被替换为空字符串，从而实现禁止空格的效果。\[3\] #### 引用[.reference_title] - *1* [vue input表单禁止输入空格](https://blog.csdn.net/qq_41752378/article/details/124292457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue el-input输入框禁止输入空格](https://blog.csdn.net/qq_39960204/article/details/124410646)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值