输入框字母自动转换大写

导读:本篇文章讲解 输入框字母自动转换大写,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

需求: “将输入框中的字母自动转换成大写,但是可以输入文字”

我试了好几种方法,最后觉得这三种方法比较靠谱,大家如果遇到类似的问题可以直接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

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!