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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使HTML5數(shù)字輸入僅接受整數(shù)

這兩年我看到很多關(guān)于這方面的文章和帖子，這的確是一個非常方便的東西。但是，太多的實現(xiàn)還是有漏洞，殘缺不全的實現(xiàn)，等等。

興化ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

整體概念是合理的：使用HTML 5屬性來限制可以發(fā)送到服務(wù)器的內(nèi)容，然后使用Javascript增強它，以限制用戶可以在第一個地方輸入的內(nèi)容。

所以讓我們來看看這些問題，并更好地實現(xiàn)它。

問題1，不好的腳本

最常見的缺陷是缺乏適當?shù)慕导壒δ堋?如果您要在“electron”或“nw.js”中構(gòu)建完整的堆棧應(yīng)用程序，那很好，但是這種形式的東西通常在面向公眾的網(wǎng)站中沒有位置。

就像我經(jīng)常說的那樣，高質(zhì)量的腳本應(yīng)該增強已經(jīng)在工作的頁面，而不是用戶使用它的唯一方法。

解決辦法?

使用 pattern 和 step 屬性來限制有效內(nèi)容。

問題2，正則表達式模式錯誤或不完整

人們最常用的模式是 [-/ d] *，它的問題是允許在任何地方都減號。 雖然肯定可以使用 type = “number” 來解決問題，但這不是一個好選擇。 截取按鍵時更是如此，因為減號只能是第一個字符。

它還可能出現(xiàn)問題，因為某些實現(xiàn)“不是”正則表達式，這會導(dǎo)致誤報。

解決辦法?

對于HTML，使用更好的表達式：^[- d]\d*$ 更加健壯和準確。減號可以是匹配開始的第一個字符，然后是零個或多個小數(shù)，直到字符串結(jié)束。

對于JavaScript，只使用正則表達式來測試數(shù)字，并應(yīng)用一些更實用的邏輯來檢測其他值。

簡單易行!

問題3，在標記中使用事件屬性

我知道在JSX垃圾中，有大量的用嘴呼吸的人在鼓勵這一點，但如果你在寫vanilla或其他系統(tǒng)，請出于對圣誕節(jié)的愛，從1997年的直腸中取出你的頭顱。

將 “onkeypress” 或 “onchange” 放在標記中意味著錯失了一次緩存機會，也違反了分離關(guān)注的原則。以這種方式將 JavaScript 放進標記中，就像在 HTML 4 Strict 中被廢棄的所有東西一樣，愚蠢得令人發(fā)指。就像如果你要用 “text-white box-shadow col-4-s” 這樣的屬性在你的HTML上撒尿一樣，請你承認失敗，然后回到寫HTML 3.2的時候，用所有那些FONT / CENTER標簽、COLOR、BGCOLOR、SIZE、BORDER和ALIGN屬性，以及 "用于布局的表格 "來寫，你們似乎都很清楚地、很珍視地錯過了。

這也意味著您沒有完整/適當?shù)氖录幚沓绦蛟L問權(quán)限。

解決辦法?

Element.addEventListener，請使用它!

問題4，必須對每個輸入進行硬編碼

無論是通過問題3將事件屬性放到標記中，還是通過手動獲取唯一ID來捕獲它們，我?guī)缀鯖]有發(fā)現(xiàn)可以實際使用即插即用的標記應(yīng)用程序的代碼庫!

解決辦法?

document.querySelectorAll('input[type="number”][step="1"]') 給我們提供所有我們想要的整數(shù)輸入，所以我們可以增強它。

問題5，一些腳本阻止使用導(dǎo)航控制和正常編輯!

通過攔截并只允許減號和0...9，它們可以防止退格鍵、回車鍵、制表鍵、箭頭、刪除、插入等等等等。并不是所有的瀏覽器都會把這些作為 event.key 發(fā)送，這要看你鉤住的是什么事件。比如 “keypress” 事件在Firefox和Chrome中會過濾掉一些，以免破壞正常的表單使用，但 “老Edge” 和Safari不會，“keydown” 則什么也不過濾。

解決辦法?

因為 “keypress” 事件跨瀏覽器不一致，所以用keydown代替。那么我們就可以利用所有控制鍵在 Event.key 值中返回多個字符的事實，我們只需要檢查 Event.key.length>1 就可以說 “繼續(xù)允許這些”。

正如前面所提到的，我們所需要的只是一個簡單的輸入，在不使用JavaScript的情況下，它首先具有盡可能多的功能!

HTML：

 
 
 
 
    
  
  
  
  
  1.  
    2.

只接受整數(shù)，如果你想只接受正數(shù)，可以換成 pattern="/d+”

JavaScript：

然后我們可以使用JavaScript來限制用戶的輸入，這樣人們甚至不允許輸入無效值。

 
 
 
 
    
  
  
  
  
  1. (function() { 
    2. 
  
  
  
  
  2.   var 
    3. 
  
  
  
  
  3.     integers = document.querySelectorAll('input[type="number"][step="1"]'), 
    4. 
  
  
  
  
  4.     intRx = /\d/; 
    5. 
  
  
  
  
  5.    
    6. 
  
  
  
  
  6.   for (var input of integers) { 
    7. 
  
  
  
  
  7.     input.addEventListener('keydown', integerChange, false); 
    8. 
  
  
  
  
  8.   } 
    9. 
  
  
  
  
  9.   
    10. 
  
  
  
  
  10.   function integerChange(event) { 
    11. 
  
  
  
  
  11.     if ( 
    12. 
  
  
  
  
  12.       (event.key.length > 1) ||  
    13. 
  
  
  
  
  13.       ( 
    14. 
  
  
  
  
  14.         (event.key === "-") && 
    15. 
  
  
  
  
  15.         (event.currentTarget.value.length === 0) 
    16. 
  
  
  
  
  16.       ) || 
    17. 
  
  
  
  
  17.       intRx.test(event.key) 
    18. 
  
  
  
  
  18.     ) return; 
    19. 
  
  
  
  
  19.     event.preventDefault(); 
    20. 
  
  
  
  
  20.   } 
    21. 
  
  
  
  
  21.   
    22. 
  
  
  
  
  22. })(); 
    23.

我們首先將其包裝在IIFE中以隔離范圍。 然后，抓取我們要在頁面上掛接的所有輸入，并創(chuàng)建我們的正則表達式。

我在事件開始處而不是在事件內(nèi)部創(chuàng)建正則表達式，這樣我們就不用浪費時間在每個該死的按鍵上創(chuàng)建它。這就是匿名函數(shù)可能帶來開銷的地方，也是需要告訴那些“函數(shù)式程序員”和他們的“副作用”廢話的地方。

循環(huán)遍歷所有輸入，并為它們分配事件處理程序。

上述處理程序只是檢查我們的返回情況。像箭頭、退格鍵、回車鍵等控制鍵都會返回完整的文字來描述它們，所以如果event.key的長度>1，我們就不要阻止這些。

如果它是一個負號和第一個字符，通過return允許它。

如果它是一個數(shù)字，通過return允許它。

如果都不是，請阻止該事件。

Live Demo

這是一個代碼本，它包括幾個文本字段和多個整數(shù)和非整數(shù)的數(shù)字字段，所以你可以看到它確實只鉤住了我們想要的字段。

https://codepen.io/jason-knight/pen/QWGyrwq

懸而未決的問題

我可能會考慮添加的一件事是掛鉤“change”事件來攔截粘貼，但由于“pattern”屬性不允許提交無效的值，所以應(yīng)該沒有問題。

結(jié)論

多想想用戶可能會輸入錯誤的東西，以及如何處理，但也要記住用戶可能輸入的所有其他東西，而這些東西與值本身沒有關(guān)系。

請始終注意，許多用戶會主動阻止腳本編寫，或者出于安全或可訪問性的原因讓腳本在UA中不可用。增強而不是取代你的基本功能!

計劃將這些東西應(yīng)用到所有這些字段，而不是從一開始就只使用單個元素。

留意低效率，例如如何多次生成用作回調(diào)的匿名函數(shù)……或如何將腳本放入標記中會錯失跨頁面或重新訪問的緩存機會。

做了這些事情之后，實現(xiàn)這樣簡單的功能就不會再來困擾您或惹惱用戶了。


網(wǎng)頁題目：使HTML5數(shù)字輸入僅接受整數(shù)
網(wǎng)址分享：http://www.dlmjj.cn/article/dhcgjpi.html