如何在 Vuetify 中自动大写文本字段的内容？

Question

我需要一个v-text-field用户可以输入他们通过短信收到的确认码的地方。即使用户没有写大写字母的意图，该字段的内容也应该全部自动转换为大写字母。

Answer 1

您可以keyup像这样使用事件大写：

<v-text-field v-model="code" label="Code" @keyup="uppercase" class="code"></v-text-field>

...

data: function() {
    return {
        code: ""
    };
},
methods: {
    uppercase() {
        this.code = this.code.toUpperCase();
    }
}

这是代码笔

还有额外的 CSS 样式，用于隐藏用户的转换延迟