需求: “将输入框中的字母自动转换成大写,但是可以输入文字”
。
我试了好几种方法,最后觉得这三种方法比较靠谱,大家如果遇到类似的问题可以直接c+v,放心冲。
第一种:οnkeyup=“this.value=this.value.toUpperCase()”
可以实现,但是输入文字会有干扰,比较有局限性,适合纯字母输入。
<el-input onkeyup="this.value=this.value.toUpperCase()" v-model="form.hphm" placeholder="请输入号牌号码"></el-input>
第二种:text-transform: uppercase;
只需要给输入框加上一个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,大家如果感兴趣的话也可以自己去看一下。
第三种:toUpperCase()方法
运用计算属性和toUpperCase()方法可以完美实现,最佳方案。
<!-- //v-model="codeval" 绑定的codeval要和computed中的codeval一致 -->
<el-input maxlength="7" v-model="codeval" placeholder="请输入号牌号码"></el-input>
computed: {
codeval: {
get: function () {
return this.form.hphm;//绑定的model数据
},
set: function (val) {
this.form.hphm = val.toUpperCase();//toUpperCase()方法用于将小写字符转换为大写
}
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79431.html