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

And*_*eth 3 vuetify.js

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

Yur*_*iuk 7

您可以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();
    }
}
Run Code Online (Sandbox Code Playgroud)

这是代码笔

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

  • 我遇到了类似的问题,但是在我看来,上面的代码非常复杂。像这样的东西可能会干净得多。` &lt;v-text-field v-model="code" label="Code" @input="code = code.toUpperCase()" class="code"&gt;&lt;/v-text-field&gt; ` 这消除了需要对于要定义的单一使用方法,并且也没有任何输入延迟,其中输入首先出现小写,然后大写。 (3认同)