vuetify.js - 如何在 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();
    }
}

这是 Codepen

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