[英]Input Field Only Accepting Numeric Value Using Directive In Vue.js
我是Vue.js的新手。 我想要一個只接受數字的輸入字段,如果用戶輸入任何其他值,它將被替換為空字符串。 因此,我想在此字段中添加自定義指令,即“numericOnly”。
自定義指令代碼:
Vue.directive('numericOnly', {
bind (el, binding, vnode) {
regex = /^[0-9]*$/
if(!regex.test(el.value)){
el.value = el.value.slice(0, -1)
}
}
})
這是我的模板:
<input v-numericOnly name="mobileNumber" placeholder="Mobile Number" >
但是當輸入字段綁定到DOM時,它只運行一次。
請幫我弄清楚這個問題。 先感謝您。
您的指令應該監聽input元素的keyup
以實現您的需要:
Vue.directive('numericOnly', {
bind(el) {
el.addEventListener('keyup', () => {
let regex = /^[0-9]*$/
if (!regex.test(el.value)) {
el.value = el.value.slice(0, -1)
}
})
}
})
import Vue from 'vue'
Vue.directive('numericOnly', {
bind(el, binding, vnode) {
el.addEventListener('keydown', (e) => {
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault()
}
})
}
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.