如何在 vue.js 中创建始终大写的输入？

Question

我正在使用 vue.js 创建一个表单，我需要在 vue 中创建始终大写的输入。我知道我可以使用 css 属性

text-transform: uppercase;

然后在发送之前使用

转换数据

data.someData.toUpperCase()

但我想知道在 vue.js 中是否有更智能的方法来做到这一点。在 React 中，我们可以创建受控输入并轻松做到。 Vue.js 中有类似的东西吗？

我设法使用计算字段来做到这一点，但是，我必须为表单中的每个输入创建计算的 getter 和 setter。有更好的方法吗？

Answer 1

您可以创建自定义指令。

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

然后在需要的地方使用它。例如：

<input type="text" v-model="modelfield" v-touppercase>

Answer 2

该指令与

v-model

配合使用效果很好（最后一个字符也是大写）：

Vue.directive('uppercase', {
  update(el) {
    const sourceValue = el.value;
    const newValue = sourceValue.toUpperCase();

    if (sourceValue !== newValue) {
      el.value = newValue;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    }
  },
});

用途：

<input type="text" v-model="myField" v-uppercase />

Answer 3

由于您没有太多代码要运行，因此您应该手动将事件绑定到文本字段，然后在那里处理大写。

可以通过在文本字段上添加

input

事件处理程序来处理来自文本字段的事件，然后再次更新初始状态。

<input :value="text" @input="updateText($event.target.value)"/>

export default {
    data() {
        return {
            text: '',
        }
    },
    methods: {
        updateText(newValue) {
            this.value = newValue.toUpperCase();
        },
    }
}

您也可以在模板中内联执行此操作，但这可能会使阅读变得更困难，具体取决于您的代码风格偏好

<input :value="text" @input="text = $event.target.value.toUpperCase()"/>

Answer 4

你可以这样做：

<input :value="theValue" @input="theValue = theValue.toUpperCase()"/>

Answer 5

作为对 asologor 答案的修复，您应该到达输入元素以在 vuetify 中更改它

Vue.directive("uppercase", {
    update(el) {
        const sourceValue = el.getElementsByTagName("input")[0].value
        const newValue = sourceValue.toUpperCase()

        if (sourceValue !== newValue) {
            el.getElementsByTagName("input")[0].value = newValue
            el = el.getElementsByTagName("input")[0]
            el.dispatchEvent(new Event("input", { bubbles: true }))
        }
    }
})

用法是

 <v-text-field
              type="text"
              outlined
              placeholder="placeholder"
              v-model="name"
              prepend-inner-icon="edit"
              v-uppercase
            />

这确实有效

Answer 6

asologor 解决方案对我来说效果很好，但它有一个小错误，如果我在输入文本的中间编辑了一个部分，光标就会失去其位置并直接定位在末尾，解决方案是保存位置

注意：我将 Nuxt 3 与 Typescript 一起使用

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('custom-uppercase', {
        updated(el) {
            const start = el.selectionStart;
            const end = el.selectionEnd;
            const sourceValue = el.value;

            const newValue = el.value != null && el.value != undefined ? sourceValue.toUpperCase() : sourceValue

            if (sourceValue !== newValue) {
                el.value = newValue;
                el.setSelectionRange(start, end); // add this code
                el.dispatchEvent(new Event('input', { bubbles: true }));
            }
        },
    })
})

参考：

• 带指令的大写 vue 输入
• 丢失光标