Vue中實(shí)現(xiàn)輸入框Input輸入限制

監(jiān)聽輸入框變化

通過@input監(jiān)聽更新數(shù)據(jù)铺浇,實(shí)現(xiàn)只能輸入數(shù)字挺狰,而且可以自行定制限制輸入內(nèi)容

<input v-model="testValue" @input="testValue = testValue.replace(/[^\d]/g,'')">

此方法可以滿足需求驻仅,但是無法封裝進(jìn)行批量使用

封裝全局指令

封裝input限制輸入指令,限制只能輸入整數(shù)和小數(shù)

//index.js
const addListener = function (el, type, fn) {
    el.addEventListener(type, fn, false)
}

let enterNumber = {
    bind: function (el, binding) {
        if (el.tagName.toLowerCase() !== 'input') {
            el = el.getElementsByTagName('input')[0]
        }
        let val = binding.value === undefined ? 2 : binding.value;
        if (val !== 0) {
            val += 1;
        }
        addListener(el, 'input', () => {
            el.value = (el.value).replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');

// 清除'數(shù)字和'.'以外的字符
//el.value = el.value.replace(/[^\d.]/g, '');
// 必須保證第一個為數(shù)字而不是'.'
//el.value = el.value.replace(/^\./g, '');
// 保證只有出現(xiàn)一個'.'而沒有多個'.'
//el.value = el.value.replace(/\.{2,}/g, '.');
//el.value = el.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');

            if ((el.value).indexOf('.') !== -1) {
                el.value = el.value.substring(0, (el.value).indexOf('.') + val)//保留幾位小數(shù)
            }
        })
    }
}

export default {
    enterNumber,
}

注冊全局自定義指令

//main.js

import myDirective from './myDirective/index'

Object.keys(myDirective).forEach(item => {
    Vue.directive(item, myDirective[item])
})

使用指令
    <el-input v-model="num" placeholder="輸入數(shù)字" v-enter-number='2'></el-input>

這樣封裝在使用時會出現(xiàn)一個隱蔽的bug挽牢,就是在輸入指令中正則限制以外的字符時与学,視圖中輸入框顯示是正確的彤悔,但是在瀏覽器控制欄Vue Devtools中的num最后一位字符是最后輸入的時的字符。
比如輸入abc索守、123abc輸入框內(nèi)是 蜗巧、123,但實(shí)際num值是c蕾盯、123c幕屹。
原因是vue中綁定的值是通過監(jiān)聽input進(jìn)行賦值的,直接修改輸入框值不會觸發(fā)input事件级遭,需要通過dispatchEvent再次手動觸發(fā)input事件望拖,但是在監(jiān)聽的input回調(diào)中再觸發(fā)input會無限循環(huán),所以調(diào)整為監(jiān)聽keyup事件來修改值挫鸽,修改如下:


const addListener = function (el, type, fn) {
    el.addEventListener(type, fn, false)
}

let enterNumber = {
    bind: function (el, binding) {
        if (el.tagName.toLowerCase() !== 'input') {
            el = el.getElementsByTagName('input')[0]
        }
        let val = binding.value === undefined ? 2 : binding.value;
        if (val !== 0) {
            val += 1;
        }
        addListener(el, 'keyup', () => {
            el.value = (el.value).replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
// 清除'數(shù)字和'.'以外的字符
//el.value = el.value.replace(/[^\d.]/g, '');
// 必須保證第一個為數(shù)字而不是'.'
//el.value = el.value.replace(/^\./g, '');
// 保證只有出現(xiàn)一個'.'而沒有多個'.'
//el.value = el.value.replace(/\.{2,}/g, '.');
//el.value = el.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            if ((el.value).indexOf('.') !== -1) {
                el.value = el.value.substring(0, (el.value).indexOf('.') + val)//保留幾位小數(shù)
            }
            el.dispatchEvent(new Event('input'))
            //通過dispatchEvent再次手動觸發(fā)input事件
        })
    }
}




export default {
    enterNumber,
}

到這里算是滿足了要求说敏,也能方便的使用,分享出來希望能夠拋磚引玉丢郊,學(xué)習(xí)到更好的方式盔沫,如果有更好的方法請告訴我,謝謝枫匾!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末架诞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子干茉,更是在濱河造成了極大的恐慌谴忧,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件角虫,死亡現(xiàn)場離奇詭異沾谓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)戳鹅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門均驶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人枫虏,你說我怎么就攤上這事妇穴∨朗” “怎么了?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵伟骨,是天一觀的道長饮潦。 經(jīng)常有香客問我,道長携狭,這世上最難降的妖魔是什么继蜡? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮逛腿,結(jié)果婚禮上稀并,老公的妹妹穿的比我還像新娘。我一直安慰自己单默,他們只是感情好碘举,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著搁廓,像睡著了一般引颈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上境蜕,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天蝙场,我揣著相機(jī)與錄音,去河邊找鬼粱年。 笑死售滤,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的台诗。 我是一名探鬼主播完箩,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拉队!你這毒婦竟也來了弊知?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤氏仗,失蹤者是張志新(化名)和其女友劉穎吉捶,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體皆尔,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年币励,在試婚紗的時候發(fā)現(xiàn)自己被綠了慷蠕。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡食呻,死狀恐怖流炕,靈堂內(nèi)的尸體忽然破棺而出澎现,到底是詐尸還是另有隱情,我是刑警寧澤每辟,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布剑辫,位于F島的核電站,受9級特大地震影響渠欺,放射性物質(zhì)發(fā)生泄漏妹蔽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一挠将、第九天 我趴在偏房一處隱蔽的房頂上張望胳岂。 院中可真熱鬧,春花似錦舔稀、人聲如沸乳丰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽产园。三九已至,卻和暖如春夜郁,著一層夾襖步出監(jiān)牢的瞬間什燕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工拂酣, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留秋冰,地道東北人。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓婶熬,卻偏偏與公主長得像剑勾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赵颅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361