在 Chrome(或其他 Chromium 瀏覽器)中,當我嘗試獲取數字輸入欄位的值時,當最后一個字符是點 ( .)時,該值為空。
這是我能想到的最簡單的例子:
<input type="number" oninput="console.log(event.target.value)">
在 Chrome 中,例如鍵入“123.45”將導致以下輸出:
1
12
123
123.4
123.45
在 Firefox 中,我得到了更像我期望的東西:
1
12
123
123
123.4
123.45
如果最后一個字符是點,則獲取valueAsNumber而不是value將導致 a NaN,所以那里也沒有成功。有沒有辦法獲得欄位的實際值(或至少是沒有點的值)而不是已經以某種方式決議的值?
更新:
感謝@Kaiido,我更接近于為什么會發生這種情況在我的 Chrome 瀏覽器navigator.languages中設定為['en-US', 'en', 'nl']在 Firefox 中設定為只是['en-US', 'en']
這解釋了2個瀏覽器之間(對我來說),為什么在Chrome我差可以使用,,以及.。
但我仍然需要一個解決問題的方法。在我的情況下,最重要的事情是我需要區分欄位是空的還是其他一些無法決議為數字的值。所以現在問題更多的是有沒有辦法獲得欄位中實際型別的值。
uj5u.com熱心網友回復:
使用“ step ”屬性使其驗證并使用區域設定分隔符。
<input type="number" step="0.01" oninput="console.log(event.target.value)" />
更多資訊:
<input type="number" oninput="console.log('VAL: %s|%s|%s', this.value, this.checkValidity(), this.validationMessage)" step="0.1">
輸入當前語言環境中未使用的分隔符,有效性和相應的訊息將指示“這不是數字”,一旦輸入更多數字 - 達到step屬性允許的精度限制- 它將再次決議為有效值。您的 GUI 應相應地指示當前有效性 - 如果您的代碼要求它始終可用作有效數字,您可以根據您的用例保存通過驗證的最后一個值。
還要考慮使用字符“e”,這可能會導致臨時無效值!
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/404542.html
標籤:
