强制输入表单在 vue.js 中输入大写到后端

Question

我尝试输入“a001”，由于 CSS 规则，显示屏将显示“A001”。 在传递到后端之前将其转换为大写的正确/最佳方法是什么？

new Vue({
  el: '#app',
  data: {
    myid: ''
  },
  methods: {
    click: function() {
      console.log('clicked id=', this.myid)
    }
  }
});

div input {
  text-transform: uppercase
}

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script>
<div id="app">
  <input type="text" v-model="myid" placeholder="My ID" />
  <button type="button" @click="click">Submit</button>
</div>

Answer 1

自定义指令：

Vue.directive("uppercase", {
    update: function (el) {
        el.value = el.value.toUpperCase()
    }
})

<input type="text" v-model="myid" placeholder="My ID" v-uppercase/>

Answer 2

没有任何computed或$event的简单方法

<v-text-field
   v-model="batchNo"
   label="Batch Number"
   @input="(val) => (batchNo = batchNo.toUpperCase())"
   >
</v-text-field>

这里使用了来自 Vuetify 的文本字段，但您也可以将其与 HTML 输入一起使用。

Answer 3

第一个答案有问题：最后一个字符还是小写。

<textarea v-model="remark" 
                    @input="remark=$event.target.value.toUpperCase()"></textarea>

这可行，但如果字段多，则需要编写更多代码。

也许有更好的解决方案。

Answer 4

HTML：

<div id="app">
   <input type="text" v-model="message" />
   <h4>{{ message | uppercase }}</h4>
</div>

控制器：

Vue.filter('uppercase', function (value) {
   return value.toUpperCase()
})

new Vue({
  el: '#app',
  data: {
    message: 'foo'
   }
})

我希望这能解决你的问题。

Answer 5

你可以像这样使用名为toUpperCase()的javascript函数：

new Vue({
  el: '#app',
  data: {
    myid: ''
  },
  methods: {
    click: function() {
    var str = this.myid.toUpperCase();
      console.log('clicked id=', str)
    }
  }
});

div input {
  text-transform: uppercase
}

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script>
<div id="app">
  <input type="text" v-model="myid" placeholder="My ID" />
  <button type="button" @click="click">Submit</button>
</div>

现在，如果您只想传递大写的值而不显示它，或者您可以保留它，您可以删除 css 规则。 希望有帮助:)

Answer 6

如果您只想存储大写值，那么如果您将计算值传递给服务器，那么提供的两个答案将起作用 - 我认为有些 mau 错过了您问题的“在将其传递给后端之前”部分。但是，如果您想在用户键入时以大写形式在输入中显示它并并行更新实际输入 v-model（这可能已经传递给后端），您需要类似：

new Vue({
  el: '#app',
  data: {
    form: {
      id:''
    }
  },
  methods: {
    forceUpper (e, obj, prop) {
      const start = e.target.selectionStart
      e.target.value = e.target.value.toUpperCase()
      this.$set(obj, prop, e.target.value)
      e.target.setSelectionRange(start, start)
    }
  }
});

<script src="https://unpkg.com/vue@2.5.10/dist/vue.min.js"></script>
<div id="app">
  <input
    v-model="form.id"
    @input="forceUpper($event, form, 'id')"
  />
  <br><br>
  {{ form }}
</div>

注意：如果您使用包装输入元素的 UI/CSS 框架（例如 Quasar），您可能需要使用 @input.native 事件而不是 @input。 @input 通常只是传递值而不是整个事件。

Answer 7

我知道这可能是一个老问题，但也许有一天有人会在这里寻求帮助，所以为什么不分享对我有用的东西。两件事，第一是，您将创建一个自定义组件来发出输入事件，但在绑定此事件之前，您将对将发出的值使用 Javascript 'toUpperCase()' 方法。 第二 - 一个自定义组件，但这次您可以在它更改时观察值，然后将当前值转换为大写并将该值绑定到内部模型更改。好吧，为了节省一些墨水，让我们深入研究一些编码......

Vue.component('app-input', {
  props: ['value'],
  template: `<input class="input__field input__first" :value="value" @keyup="keyUpHandler"/>`,
  methods: {
    keyUpHandler($event) {
      this.$emit('input', String($event.target.value).toUpperCase());
    },
  },
});

Vue.component('app-input2', {
  props: ['value'],
  data() {
    return {
      innerValue: '',
    }
  },
  template: `<input class="input__field input__second" v-model="innerValue"/>`,
  watch: {
    // Handles internal model changes.
    innerValue(newVal) {
      this.$nextTick(() => {
        this.$emit('input', newVal);      
      });
    },
    // Handles external model changes.
    value(newVal) {
      this.innerValue = String(newVal).toUpperCase();
    },
  },
  created() {
    if (this.value) {
      this.innerValue = String(this.value).toUpperCase();
    }
  },
});

new Vue({
  el: '#app',
  data: {
    obj: {},
  }
});

.input__field {
  border: 1px solid #000;
  font-size: 20px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="input">
    <!-- C U S T O M - C O M P O N E N T - 1 -->
    <app-input v-model="obj.first"/>
  </div>
  <p>FIRST- {{ obj.first }}</p>
  <br/>
  <div class="input">
    <!-- C U S T O M - C O M P O N E N T - 2 -->
    <app-input2 v-model="obj.second"/>
  </div>
  <p>SECOND- {{ obj.second }}</p>
</div>

我一直更喜欢第二种方法，但您可以使用这两种方法，希望它可以帮助您或其他人。

Answer 8

我让它工作的唯一方法是：

Vue.directive('uppercase', {
  bind(el, _, vnode) {
    el.addEventListener('input', (e) => {
      e.target.value = e.target.value.toUpperCase()
      vnode.componentInstance.$emit('input', e.target.value.toUpperCase())
    })
  },
})

<v-text-field
    v-model="model"
    v-uppercase
    type="text"
/>