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

Posted 2023-02-22

【中文标题】强制输入表单在 vue.js 中输入大写到后端

【英文标题】：force input form enter uppercase to backend in vue.js

【发布时间】：2018-05-31 12:48:55

【问题描述】：

我尝试输入“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>

【问题讨论】：

使用 .toUpperCase() 怎么样？

如果需要转换多个字段，我想知道是否有 css 规则来简化额外的代码

CSS 有 style="text-transform:uppercase" 但它只是可视的，如果您尝试发送数据，它将在您输入时通过，而不是您如何将其视为大写字母. javascript 是唯一的方法。

【参考方案1】：

自定义指令：

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

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

【讨论】：

这个解决方案很干净——但是每次提交到数据库时似乎都将最后一个字符保留为小写？在前端，它都是大写的。只有我吗？

此解决方案是否考虑在现有输入和粘贴字符中间突出显示文本？

@Grant 我添加了 el.dispatchEvent(new Event('input'));在值更新之后，这似乎解决了最后一个字符问题。在这里的评论中找到了这个解决方案：github.com/vuejs/vue/issues/2804

我注意到这确实适用于上述@TonyRush 链接。但是，刚刚发现它不能很好地与 Vuelidate 配合使用。反过来，即使在$reset() 之后，它也会立即再次变脏。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

也许有更好的解决方案。

【参考方案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'
   
)

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

【参考方案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 规则。 希望有帮助:)

【参考方案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 通常只是传递值而不是整个事件。

【参考方案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>

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

【参考方案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"
/>