vue中如何限制文本框輸入數(shù)字
這篇文章主要介紹“vue中如何限制文本框輸入數(shù)字”，在日常操作中，相信很多人在vue中如何限制文本框輸入數(shù)字問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中如何限制文本框輸入數(shù)字”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
尼開遠(yuǎn)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)建站從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
事件選型
首先我們很容易想到通過事件來達(dá)到目的，大致可以通過以下幾個事件來實(shí)現(xiàn)：
keypress/keydown
思路：按鍵按下的時候觸發(fā)，通過判斷按下的是否是數(shù)字返回true/false來限制用戶的輸入。
缺點(diǎn)：無法限制用戶復(fù)制粘貼的數(shù)據(jù)。
keyup
思路：同keypress事件，區(qū)別在于按鍵摁下彈起的時候觸發(fā)。
缺點(diǎn)：從界面上看有個回退（顯示用戶輸入的 不合法字符之后刪除回退）的現(xiàn)象，不是很自然。
input
思路：用戶輸入的時候觸發(fā)
優(yōu)點(diǎn)：可以在用戶復(fù)制粘貼的時候獲取到完整的值，同時不會有界面回退的現(xiàn)象。
初步實(shí)現(xiàn)
綜合各種方案的優(yōu)缺點(diǎn)，選定input事件來實(shí)現(xiàn)，首先我們來實(shí)現(xiàn)最簡單的限制用戶只能輸入正整數(shù)。代碼如下：
<el-input v-model="model" oninput="value=value.replace(/[^\d]/g, '')" />
但是，此方法有的時候沒有很好地達(dá)到預(yù)期效果，這邊我放到最后再來講。
封裝成指令
通過自定義指令來增加相應(yīng)DOM的特性，使其支持文本輸入限制。
function onInput(el, ele, binding, vnode) {
function handle() {
// 只保留數(shù)字
ele.value = ele.value.replace(/[^\d]/g, '')
}
return handle
}
const numberInput= {
bind(el, binding, vnode) {
const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
ele.addEventListener('input', onInput(el, ele, binding, vnode), false)
},
}
Vue.directive('number-input', numberInput)使用方法：
<el-input v-model="model" v-number-input />
支持浮點(diǎn)數(shù)
我們知道v-model指令有三種修飾符lazy, number, trim實(shí)現(xiàn)了不同的功能，這邊呢，也想通過v-number-input.float的方式達(dá)到支持浮點(diǎn)數(shù)的目的 。
修改handle回調(diào)，增加浮點(diǎn)數(shù)的支持
function handle() {
+ let val = ele.value
+ // modifiers為修飾符對象，傳入了float，則其float屬性為true
+ if (binding.modifiers.float) {
+ // 清除"數(shù)字"和"."以外的字符
+ val = val.replace(/[^\d.]/g, '')
+ // 只保留第一個, 清除多余的
+ val = val.replace(/\.{2,}/g, '.')
+ // 第一個字符如果是.號，則補(bǔ)充前綴0
+ val = val.replace(/^\./g, '0.')
+ } else {
val = ele.value.replace(/[^\d]/g, '')
}
ele.value = val
}使用方法：
<el-input v-model="model" v-number-input.float />
支持小數(shù)保留位最大位數(shù)限制
查閱官方文檔可知，指令支持參數(shù)的傳遞，這邊我們期望通過參數(shù)傳遞小數(shù)點(diǎn)保留位數(shù)的配置
function handle() {
let val = ele.value
// modifiers為修飾符對象，傳入了float，則其float屬性為true
if (binding.modifiers.float) {
// 清除"數(shù)字"和"."以外的字符
val = val.replace(/[^\d.]/g, '')
// 只保留第一個, 清除多余的
val = val.replace(/\.{2,}/g, '.')
// 第一個字符如果是.號，則補(bǔ)充前綴0
val = val.replace(/^\./g, '0.')
+ if (typeof binding.value !== 'undefined') {
+ // 期望保留的最大小數(shù)位數(shù)
+ let pointKeep = 0
+ if (typeof binding.value === 'string'
+ || typeof binding.value === 'number') {
+ pointKeep = parseInt(binding.value)
+ }
+ if (!isNaN(pointKeep)) {
+ if (!Number.isInteger(pointKeep)
+ || pointKeep < 0) {
+ pointKeep = 0
+ }
+ const str='^(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
+ const reg=new RegExp(str)
+ if (pointKeep === 0) {
+ // 不需要小數(shù)點(diǎn)
+ val = val.replace(reg, '$1')
+ } else {
+ // 通過正則保留小數(shù)點(diǎn)后指定的位數(shù)
+ val = val.replace(reg, '$1.$2')
+ }
+ }
} else {
val = ele.value.replace(/[^\d]/g, '')
}
ele.value = val
}使用方法：
// 最多支持保留2位小數(shù) <el-input v-model="model" v-number-input.float="2" />
支持負(fù)數(shù)
對正則稍加修改，只保留開頭的負(fù)號，使其支持負(fù)數(shù)
function handle() {
let val = ele.value
// modifiers為修飾符對象，傳入了float，則其float屬性為true
if (binding.modifiers.float) {
// 清除"數(shù)字"和"."以及"-"以外的字符
+ val = val.replace(/[^\-\d.]/g, '')
// 只保留第一個'-'號
+ val = val.replace(/\.{2,}/g, '.').replace(/\-{2,}/g, '-')
// 將 '-.' 替換成 '-0.'
+ val = val.replace(/^\./g, '0.').replace(/^\-\./, '-0.')
if (typeof binding.value !== 'undefined') {
// 期望保留的最大小數(shù)位數(shù)
let pointKeep = 0
if (typeof binding.value === 'string'
|| typeof binding.value === 'number') {
pointKeep = parseInt(binding.value)
}
if (!isNaN(pointKeep)) {
if (!Number.isInteger(pointKeep)
|| pointKeep < 0) {
pointKeep = 0
}
// 增加'-'號的支持
+ const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
const reg=new RegExp(str)
if (pointKeep === 0) {
// 不需要小數(shù)點(diǎn)
+ val = val.replace(reg, '$1$2')
} else {
// 通過正則保留小數(shù)點(diǎn)后指定的位數(shù)
+ val = val.replace(reg, '$1$2.$3')
}
}
} else {
val = ele.value.replace(/[^\d]/g, '')
}
ele.value = val
}支持輸入的最大值和最小值的限制
指令的參數(shù)支持對象的傳遞，因此這邊我們通過對象的字段配置最大數(shù)和最小值的配置。定義如下：
{
min: {type: number},
max: {type: number},
// 最大小數(shù)位，僅在float下有效
decimal: {type: number}
}function handle() {
let val = ele.value
// modifiers為修飾符對象，傳入了float，則其float屬性為true
if (binding.modifiers.float) {
// 清除"數(shù)字"和"."以及"-"以外的字符
val = val.replace(/[^\-\d.]/g, '')
// 只保留第一個'-'號
val = val.replace(/\.{2,}/g, '.').replace(/\-{2,}/g, '-')
// 將 '-.' 替換成 '-0.'
val = val.replace(/^\./g, '0.').replace(/^\-\./, '-0.')
if (typeof binding.value !== 'undefined') {
// 期望保留的最大小數(shù)位數(shù)
let pointKeep = 0
if (typeof binding.value === 'string'
|| typeof binding.value === 'number') {
pointKeep = parseInt(binding.value)
+ } else if (typeof binding.value === 'object') {
+ // 支持新的小數(shù)點(diǎn)保留位配置
+ pointKeep = binding.value.decimal
}
if (!isNaN(pointKeep)) {
if (!Number.isInteger(pointKeep)
|| pointKeep < 0) {
pointKeep = 0
}
// 增加'-'號的支持
const str='^(\\-)*(\\d+)\\.(\\d\{' + pointKeep + '}).*$'
const reg=new RegExp(str)
if (pointKeep === 0) {
// 不需要小數(shù)點(diǎn)
val = val.replace(reg, '$1$2')
} else {
// 通過正則保留小數(shù)點(diǎn)后指定的位數(shù)
val = val.replace(reg, '$1$2.$3')
}
}
} else {
val = ele.value.replace(/[^\d]/g, '')
}
+ if (val !== '' && typeof binding.value === 'object') {
+ let { min, max } = binding.value
+ min = parseFloat(min)
+ max = parseFloat(max)
+ if (!isNaN(min)) {
+ if (min >= 0) {
+ // 不能是負(fù)數(shù)
+ val = val.replace('-', '')
+ }
+ if (parseFloat(val) < min) {
+ val = min
+ }
+ }
+ if (!isNaN(max)) {
+ if (parseFloat(val) > max) {
+ val = max
+ }
+ }
+ }
ele.value = val
}使用方法：
// 最小為0
<el-input v-model="model" v-number-input="{ min: 0 }" />結(jié)語
至此我們的功能已經(jīng)實(shí)現(xiàn)得差不多了，上述代碼已經(jīng)足以應(yīng)對我們的大多數(shù)的需求了。但在我發(fā)現(xiàn)某些場景下有的時候鍵入非數(shù)字時，表單驗(yàn)證獲取的數(shù)值仍然是我鍵入的字符而非空值，導(dǎo)致非空驗(yàn)證不正確。但是這種情況并非必現(xiàn)的，我猜想可能是因?yàn)槭莢ue的model數(shù)據(jù)未同步導(dǎo)致的，因此在上述回調(diào)函數(shù)添加上以下代碼，手動觸發(fā)數(shù)據(jù)的雙向綁定。
if (vnode.componentInstance) {
vnode.componentInstance.$emit('input', ele.value)
} else {
vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
}到此，關(guān)于“vue中如何限制文本框輸入數(shù)字”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
網(wǎng)頁標(biāo)題：vue中如何限制文本框輸入數(shù)字
文章路徑：http://bm7419.com/article34/igdepe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、做網(wǎng)站、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 成都APP開發(fā)：自主學(xué)習(xí)App開發(fā)是否值得 2022-07-27
- 上海設(shè)備控制APP開發(fā)如何便于手機(jī)操作？ 2020-12-29
- APP開發(fā)與小程序開發(fā)你更加適合哪個？ 2023-01-21
- 濰城便利店超市APP開發(fā)有哪些實(shí)用功能 2020-12-17
- APP開發(fā)制作價格差距大的具體原因 2020-11-23
- 紹興在線教育輔導(dǎo)APP開發(fā)有哪些功能要點(diǎn)？ 2020-12-06
- 我想做手機(jī)app我要了解移動app開發(fā)費(fèi)用明細(xì) 2022-08-13
- 相親APP開發(fā)很受歡迎的嗎？ 2023-02-20
- app開發(fā)中的上帝模式與農(nóng)民模式 2023-03-10
- 法律咨詢APP開發(fā)有什么功能？ 2023-03-04
- 企業(yè)如何正確理解APP開發(fā)？ 2023-03-08
- 淺談APP開發(fā)對于企業(yè)的益處 2022-07-22