Vuejs在输入时替换

Question

我正在使用VueJS(vue 2(和Vuetify我有一个输入类型"；数字"；允许字母"；e"；以及"-"(HTML中的正常行为(

我想要的是在我的输入中替换('e'，''(

<v-text-field
ref="Invoice"
v-model="invoice"
label="Invoice Number"
required
></v-text-field>

做这件事最好的方法是什么？

Answer 1

使用getter和setter尝试计算属性：

<v-text-field
ref="Invoice"
v-model="invoice"
label="Invoice Number"
required
></v-text-field>
<script>
export default {
data() { return { invoiceNumber: 0 } },
computed: {
invoice: {
get() {
return this.invoiceNumber
},
set(value) {
this.invoiceNumber = value.replace() // your code here
}
}
}
}
</script>

为了防止输入特定的密钥，请使用密钥修改器而不是计算设置器：

<v-text-field 
ref="Invoice" 
v-model="invoice" 
label="Invoice Number" 
required 
@keydown.69.prevent   // 69 is keyCode for 'E' key
></v-text-field>

这将适用于Vue2。Vue3对修饰符的使用有一些不同的规则。

Answer 2

根据我的理解，您希望防止用户在文本字段中输入e字符。如果是，则可以通过使用RegEx.test()方法来实现，然后防止输入字符。

if (/e/.test(<input character>)) {
event.preventDefault();
}

实时演示：

new Vue({
el: '#app',
data: () => ({
invoice: null
}),
methods: {
validate: function(e) {
let char = String.fromCharCode(e.keyCode); // Get the character
if(/^[^e]+$/.test(char)) return true; // Match with regex 
else e.preventDefault(); // If not match, don't add to input text
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css"/>
<div id="app">
<v-text-field
v-model="invoice"
label="Invoice Number"
v-on:keypress="validate($event)"
/>
</div>