Question

I've tried to input 'a001', the display will show 'A001' because the CSS rule. What's the proper/best way to convert it to uppercase before passing to backend?

setTimeout(function a(){
   element.classList.add('className');
   setTimeout(function b() {
       element.classList.remove('className');
   }, 200);
},200);

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

div input {
  text-transform: uppercase
}

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

HTML:

  let destination: DownloadRequest.DownloadFileDestination = { _, _ in
      let pathComponent = "pack\(self.packID)-\(selectRow + 1).mp4"
      let directoryURL: URL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
      let folderPath: URL = directoryURL.appendingPathComponent("Downloads", isDirectory: true)
      let fileURL: URL = folderPath.appendingPathComponent(pathComponent)
      return (fileURL, [.removePreviousFile, .createIntermediateDirectories])
    }

Controller:

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

I wish this solves your problem.

Answer 3

You can use javascript function called $("#table").empty() like this:

toUpperCase()

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

div input {
  text-transform: uppercase
}

Now you can remove the css rule if you only want to pass the value capitalized without showing it or either you can keep it. Hope that helps :)

Answer 4

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

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>

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

Answer 5

我知道这可能是个老问题，但也许某天某天在这里寻求帮助，为什么不分享对我有用的东西。有两件事，第一件事是，您将要制作一个自定义组件，该组件将发出一个输入事件，但是在绑定此事件之前，您将对要发出的值使用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 6

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

last7day = ["", 19, 20, 21...]

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

也许有更好的解决方案。

Answer 7

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

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

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

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"
/>

force input form enter uppercase to backend in vue.js

8 个答案: