日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue中實(shí)現(xiàn)輸入框Input輸入限制

1.使用修飾符實(shí)現(xiàn)數(shù)字輸入
在VUE中可以在v-modal后添加修飾符的形式來限制輸入，比如：

創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為來安企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)，來安網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

 
 
 
    
  
  
  
  1.  
    2.

 .number可以實(shí)現(xiàn)限制數(shù)字輸入，但是會有以下問題：

會出現(xiàn)type="number"自帶樣式，當(dāng)然可以通過添加以下css清除

 
 
 
    
  
  
  
  1. /* 普通IE瀏覽器 樣式清除 */ 
    2. 
  
  
  
  2. input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ 
    3. 
  
  
  
  3. -webkit-appearance: none !important; 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. /* 火狐瀏覽器樣式清除 */ 
    6. 
  
  
  
  6. input[type="number"]{ 
    7. 
  
  
  
  7. -moz-appearance:textfield; 
    8. 
  
  
  
  8. } 
    9.

可以無限輸入特殊符號+-.，會導(dǎo)致清空data中的值testValue 這里的修飾符也無法實(shí)現(xiàn)定制限制輸入，不能滿足要求
2.監(jiān)聽輸入框變化
通過@input監(jiān)聽更新數(shù)據(jù)，實(shí)現(xiàn)只能輸入數(shù)字，而且可以自行定制限制輸入內(nèi)容

 
 
 
    
  
  
  
  1.  
    2.

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

3.封裝全局指令
封裝input限制輸入指令

 
 
 
    
  
  
  
  1. //input.js 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. const addListener = function(el, type, fn) { 
    4. 
  
  
  
  4.   el.addEventListener(type, fn, false) 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. //去掉空格 
    8. 
  
  
  
  8. const spaceFilter = function(el) { 
    9. 
  
  
  
  9.   addListener(el, 'input', () => { 
    10. 
  
  
  
  10.     el.value = el.value.replace(/\s+/, '') 
    11. 
  
  
  
  11.   }) 
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. // 限制只能輸入整數(shù)和小數(shù)（價格類、最多兩位小數(shù)） 
    15. 
  
  
  
  15. const priceFilter = function(el) { 
    16. 
  
  
  
  16.   addListener(el, 'input', () => { 
    17. 
  
  
  
  17.     el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null 
    18. 
  
  
  
  18.     if (isNaN(el.value)) { 
    19. 
  
  
  
  19.       el.value = '' 
    20. 
  
  
  
  20.     } 
    21. 
  
  
  
  21.   }) 
    22. 
  
  
  
  22. } 
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24. export default { 
    25. 
  
  
  
  25.   bind(el, binding) { 
    26. 
  
  
  
  26.     if (el.tagName.toLowerCase() !== 'input') { 
    27. 
  
  
  
  27.       el = el.getElementsByTagName('input')[0] 
    28. 
  
  
  
  28.     } 
    29. 
  
  
  
  29.     spaceFilter(el) 
    30. 
  
  
  
  30.     switch (binding.arg) { 
    31. 
  
  
  
  31.       case 'price': 
    32. 
  
  
  
  32.         priceFilter(el) 
    33. 
  
  
  
  33.         break 
    34. 
  
  
  
  34.       default: 
    35. 
  
  
  
  35.         console.warn('未知指令類型',binding.arg) 
    36. 
  
  
  
  36.         break 
    37. 
  
  
  
  37.     } 
    38. 
  
  
  
  38.   } 
    39. 
  
  
  
  39. } 
    40. 
  
  
  
  40. 注冊全局自定義指令 
    41. 
  
  
  
  41.  
    42. 
  
  
  
  42. //main.js 
    43. 
  
  
  
  43.  
    44. 
  
  
  
  44. import inputFilter from '@/directives/InputFilter.js' 
    45. 
  
  
  
  45.  
    46. 
  
  
  
  46. Vue.directive('inputFilter', inputFilter) 
    47.

使用v-input-filter指令

 
 
 
    
  
  
  
  1.  
    2.

這樣封裝在使用時會出現(xiàn)一個隱蔽的bug，就是在輸入指令中正則限制以外的字符時，視圖中輸入框顯示是正確的，但是在瀏覽器控制欄Vue Devtools中的testValue最后一位字符是最后輸入的時的字符。

比如輸入abc、123abc輸入框內(nèi)是 、123，但實(shí)際testValue值是c、123c。

原因是vue中綁定的值是通過監(jiān)聽input進(jìn)行賦值的，直接修改輸入框值不會觸發(fā)input事件，需要通過dispatchEvent再次手動觸發(fā)input事件，修改如下:

 
 
 
    
  
  
  
  1. //input.js 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. ··· 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. // 防抖 
    6. 
  
  
  
  6. let debounce = (fn, delay) => { 
    7. 
  
  
  
  7.   var delay = delay || 100; 
    8. 
  
  
  
  8.   var timer; 
    9. 
  
  
  
  9.   return function() { 
    10. 
  
  
  
  10.     var th = this; 
    11. 
  
  
  
  11.     var args = arguments; 
    12. 
  
  
  
  12.     if (timer) { 
    13. 
  
  
  
  13.       clearTimeout(timer); 
    14. 
  
  
  
  14.     } 
    15. 
  
  
  
  15.     timer = setTimeout(function() { 
    16. 
  
  
  
  16.       timer = null; 
    17. 
  
  
  
  17.       fn.apply(th, args); 
    18. 
  
  
  
  18.     }, delay); 
    19. 
  
  
  
  19.   }; 
    20. 
  
  
  
  20. } 
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22. ··· 
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24. // 限制只能輸入整數(shù)和小數(shù)（價格類、兩位小數(shù)） 
    25. 
  
  
  
  25. const priceFilter = function(el) { 
    26. 
  
  
  
  26.   addListener(el, 'input', debounce(() => {//添加防抖 防止反復(fù)觸發(fā)事件導(dǎo)致內(nèi)存溢出 
    27. 
  
  
  
  27.     el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null 
    28. 
  
  
  
  28.     if (isNaN(el.value)) { 
    29. 
  
  
  
  29.       el.value = '' 
    30. 
  
  
  
  30.     } 
    31. 
  
  
  
  31.     //觸發(fā)input事件 
    32. 
  
  
  
  32.     el.dispatchEvent(new Event('input')) 
    33. 
  
  
  
  33.   })) 
    34. 
  
  
  
  34. } 
    35. 
  
  
  
  35.  
    36. 
  
  
  
  36. ··· 
    37.

分享文章：Vue中實(shí)現(xiàn)輸入框Input輸入限制
分享鏈接：http://www.dlmjj.cn/article/ccisipp.html