el-input输入框的空格问题

原创已于 2022-06-19 11:36:44 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2021-08-17 22:54:13 首次发布

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Vue+ElementUI环境中，如何处理表单输入时去除两端空格的问题。针对需求，文章分别探讨了两种解决方案：使用v-model的.trim()修饰符（无法保留空格）和利用blur事件监听器配合trim方法在失去焦点时去除空格。这两种方法在实际应用中各有优劣，可以根据具体需求选择合适的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

 <el-input 
        v-model="formData.moduleId" 
        @blur="formData.moduleId=$event.target.value.trim()"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

再好能是***嘛！

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

蜗牛~~

03-13

6726

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

el-input 输入框禁止输入特殊字符

吴小花的博客

10-26

3357

<template> <el-input v-model="value" placeholder="请输入" @keyup.native="keyUp" @keydown.native="keydown" ></el-input> </template> <script> export default { methods:{ //限制输入.

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

Element-plus中的el-input无法输入空格和Enter事件无法触发问题

qq_41068362的博客

08-13

989

在el-input外层包了一层el-tooltip导致space和enter失效

解决input输入的是空格问题

UserGuan的博客

12-24

5493

<el-input v-model="form.reason" type="textarea" placeholder="请输入理由"/> this.form.reason.split(' ').join('').length === 0 this.form.reason.split(' ').join('').length === 0的意思是先以空格拆分成数组，再拼接起来，最...

蓝易云高防cdn - vue中elementui el-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){

vue element-ui实现input输入框金额数字添加千分位

10-15

在Vue组件的`template`部分，`<el-input>`绑定了v-model指令和trim修饰符，确保双向数据绑定并且自动去除输入值两端的空格。同时，使用`@blur`事件触发`inputMoney`方法，用于在用户完成输入后处理数据。 9. Vue...

el-input只能输入整数，小数、最多保留两位小数、最多输入4位小数，过滤el-input输入框中的特殊符号

aaa123aaasqw的博客

05-23

2296

【代码】el-input只能输入整数，小数、最多保留两位小数、最多输入4位小数，过滤el-input输入框中的特殊符号。

el-input输入框不能输入纯空格

10-31

在 Vue 的 Element UI 中，`el-input` 输入框默认会过滤掉用户输入的纯空格，这是为了防止前端直接显示过多的空白字符。如果你想让用户能够输入空格，你可以通过设置输入框的属性来改变这一行为。例如，可以使用 `...

Input 输入框禁止输入空格-vue

sun2829191346的博客

07-02

2281

Input 输入框禁止输入空格—vue+element-ui

vue+elementUI 不验证input中输入空格问题

wjw_de_java的博客

02-26

1668

element中自带的表单必填项校验不能去除空格，此时若输入空格，required: true验证还是可以通过。若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。但v-model.trim只适应字符中间没有空格的情况，若字符中间需要空格就有问题一、未加.trim（） <el-form :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input size=

input框禁止输入空格

weixin_43657954的博客

12-29

2294

禁止输入空格

el-input输入的密码不能包含空格的正则表达式

migexiaoliang的博客

03-14

1451

el-input输入的密码不能包含空格的正则表达式。element-ui 密码框显示小眼睛，点击可查看密码。我们在设置密码的时候，不管在首尾还是中间都不允许有空格的，.trim仅仅可以去除首尾空格，当在中间加空格的时候没办法知道，这时候便需要正则来校验提醒用户。

输入框input（element-ui、antd)中el-input组件只能输入数字(空格无效)

agua001的博客

08-10

6644

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 = "

elementui全局去掉输入框前后的空格

weixin_53504747的博客

04-08

2359

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

320

$("input").keydown(function(){ if(event.keyCode==32){ returnfalse } })

在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效

細水、長流√的专栏

03-02

1679

修饰符，得到的内容是去除了前后空白的，但是在输入数据的时候没法按空格键输入空格，这让录数据的人非常难受。分析不能输入空格的原因就是，element的input框不支持。版权声明：本文为CSDN博主「Yongqiang Chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。在vue项目里使用element ui组件库，你会发现使用element的input框，如果在。v-model上加.trim。