懒人必备：输入框字母自动转换大写省时省力

前言

在日常使用输入框时，输入框的字母大小写常常让我们感到困扰。然而，有了输入框字母自动转换大写功能，这一问题将不再存在。本文将为大家详细介绍这一方便实用的功能。

---

1. toUpperCase() 方法

可以实现，但是输入文字会有干扰，比较有局限性，适合纯字母输入。

栗子：

<el-input onkeyup="this.value=this.value.toUpperCase()" v-model="form.hphm" placeholder="请输入号牌号码"></el-input>

实现效果

---

2. text-transform 属性

只需要给输入框加上一个 class，把属性加上即可，局限性非常小，推荐使用。

栗子：

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

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

实现效果

其实 text-transform 还有其他几个属性值，capitalize，lowercase，inherit，大家如果感兴趣的话也可以自己了解一下。

---

3. toUpperCase() 方法 + computed 属性

运用计算属性和 toUpperCase() 方法可以完美实现，最佳方案。

栗子：

<!-- //v-model="codeval" 绑定的codeval要和computed中的codeval一致 -->
<el-input v-model="codeval" placeholder="请输入号牌号码"></el-input>

computed: {
    codeval: {
        get: function () {
            return this.form.hphm;//绑定的model数据
        },
        set: function (val) {
            this.form.hphm = val.toUpperCase();//toUpperCase()方法用于将小写字符转换为大写
        }
    }
},

实现效果