美文网首页
elementUI中input框无法输入与禁止输入空格

elementUI中input框无法输入与禁止输入空格

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-06-19 14:02 被阅读0次

如何禁止input框的空格

1、使用vue框架中的.trim修饰符

<el-input placeholder="请输入名称" v-model.trim="formData.title" maxlength=30></el-input>

2、使用原生input标签自带的keyup事件监听方法

// 实现一,简单
<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="formData.title = $event.target.value.replace(/^\s+|\s+$/gm,'')"></el-input>
// 实现二,更符合WEB标准,结构,表现和行为分离原则
<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="trimLR"></el-input>
// js部分
methods: {
    trimLR() {
        this.formData.title = this.formData.title.replace(/^\s+|\s+$/gm,'')
        //replace(/^\s+|\s+$/gm,'')去除input的空字符串
    },
}

相关文章

网友评论

      本文标题:elementUI中input框无法输入与禁止输入空格

      本文链接:https://www.haomeiwen.com/subject/fnkeydtx.html