el-input输入框字母自动转换大写

方式一

给输入框加一个class

提示

只将内容的样式变为大写，输入框的值还是小写。

html

<div class="toUpperCase">
    <el-input v-model="form.hphm" placeholder="请输入号牌号码"></el-input>
</div>

<div class="toUpperCase">
    <el-input v-model="form.hphm" placeholder="请输入号牌号码"></el-input>
</div>

css

.toUpperCase  {
    .el-input__inner {
        text-transform: uppercase !important;
    }
}

.toUpperCase  {
    .el-input__inner {
        text-transform: uppercase !important;
    }
}

使用JavaScript监听输入事件，在输入时将输入的字符转换为大写。

注意

这种方式需要监听输入框的input事件，在输入时进行转换。如果输入框有maxlength属性，还需要考虑输入框长度限制的问题。

html

<el-input v-model="form.hphm" placeholder="请输入号牌号码" @input="handleInput"></el-input>

<el-input v-model="form.hphm" placeholder="请输入号牌号码" @input="handleInput"></el-input>

javascript

methods: {
    handleInput(value) {
        this.form.hphm = value.toUpperCase(); // 将输入的字符转换为大写
    },
}

methods: {
    handleInput(value) {
        this.form.hphm = value.toUpperCase(); // 将输入的字符转换为大写
    },
}