有什么辦法可以防止 input type="number" 獲得多個點值？

Question

我只想得到十進制值，如 1.5,0.56 等，但它允許多個點。 有什么辦法可以防止

Answer 1

您可以使用pattern屬性：

 <input type="text" pattern="[0-9]+([\.,][0-9]+)?">

它將允許使用一個點，甚至一個逗號（例如歐洲小數）的模式。 要刪除逗號，應該是：

 <input type="text" pattern="[0-9]+([\.][0-9]+)?">

Answer 2

最初在這里分享

您可以在此 Codepen 中找到非常詳細的解釋

這個解決方案很簡單，並且在數字字段中只允許一個點。 它不會阻止在數字中單擊返回並在"."之前添加數字"." . 它不會阻止執行瀏覽器鍵盤快捷鍵，如刷新、復制和粘貼（只要粘貼的值是有效數字）等。 它將允許添加"." 與數字的主體，但將刪除任何超出設置限制的浮點數。

我仍然無法阻止的唯一行為是，如果您反復按輸入末尾的點鍵，點將閃爍。 發生這種情況是因為鍵入的值為"13." 是一個有效數字並返回"13" ，鍵入的值"13.."不是並返回“”。 在我的解決方案，如果一個價值回報""沒有退格鍵的按下或刪除時，它會回滾到上一個有效值，至極為"13" ，從類型值獲得的"13." .

我試過這樣的解決方案，如果一個點被按下一次，它會被阻止第二次被觸發，但是每次我設法在一個已經存在的點之后立即按下這個點然后什么都沒有，然后被卡住了除非我先按下任何其他鍵，否則能夠輸入一個點。

我認為多次按下時閃爍是最好的解決方案，因為用戶無法輸入點而什么也沒有發生。

 let lastValidInputValue; let selectedDot = false; const onKeypress = (e) => { if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault(); selectedDot = false; if (e.key === "e") e.preventDefault(); }; const onInput = (e) => { if ( e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 && e.target.value.indexOf(".") !== -1 ) { let newValue; newValue = e.target.value.slice( 0, e.target.value.indexOf(".") + parseInt(e.target.getAttribute("data-toFixed")) + 1 ); newValue = parseFloat(newValue); e.target.value = newValue; } if (e.target.value !== "") { lastValidInputValue = e.target.value; } else if (e.inputType.match(/delete/g)) { lastValidInputValue = ""; } else { e.target.value = lastValidInputValue; } }; const onSelect = (e) => { if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true; }

 <input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">

Answer 3

我知道，這是舊的。 我不確定您是否需要檢查 indexOf 等過於復雜的解決方案...

我需要的（以及我在這里展示的）是限制用戶輸入最多 2 個小數、沒有字母、沒有雙點或其他東西的（正/負）數字。

<input type="text" value="0"/>

$("input").on('input', function(e){
    let {value} = e.target;
    let processedValue = value
            .replace(/[^\d.\-]/, "")
            .replace(/^([\-]{0,1})(\d*)((\.\d{0,2}){0,1})(.*)$/g, "$1$2$3")
    $("input").val(processedValue);
  });

我的正則表達式可能有點粗糙，但它有效。 簡而言之，它正在清理任何不是數字和點的東西，然后只使用點的第一部分。

Answer 4

我有最簡單的代碼來防止多個點，它還可以防止其他一些無效值：

$('input[type=number]').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;

    if ((keyCode == 190 || keyCode == 110) && (e.currentTarget.validity) && (!e.currentTarget.validity.valid))
    {
        e.preventDefault();
        return false;
    }
});

Answer 5

您可以使用 JavaScript 捕獲輸入值中的任何更改，並檢查inputAsNumber屬性是否仍然是有效數字。 如果沒有，您可以恢復到以前的值：

 restoreData = {}; inp.oninput = preventTwoDots; restoreData['inp'] = inp.value; function preventTwoDots() { if (isNaN(this.valueAsNumber) && this.selectionStart) { this.value = restoreData['inp']; } restoreData['inp'] = this.value; }

 <input type="number" id="inp">

對selectionStart的額外檢查確保您仍然可以刪除所有數字：空輸入被視為無效數字，但無法從輸入中刪除最后一個字符會很奇怪。

備注

盡管這是您在問題中所要求的，但請注意，阻止用戶輸入並不是特別方便用戶。 當輸入無效時（在提交值時，例如當您離開輸入字段時），瀏覽器會提供視覺線索，這通常是應該如何完成的。 您不希望人們認為他們的鍵盤出現故障，或者讓他們認為剪貼板是空的，因為他們的復制/粘貼“不起作用”。