十進制文本框，僅接受正值和負值

Question

我有幾個這樣的文本框。

<input type="text" class="tblTxtRanges"  />
<input type="text" class="tblTxtRanges"  />

我必須使此文本框僅接受十進制值。 正數和負數都可以。 用戶可以輸入值，復制並粘貼到文本框中。

我必須替換數字，一個點和一個減號以外的所有其他字符。 小數位數沒有限制。 例如：有效條目為10 10.11 -11 -11.23655等。

---

到目前為止我做了什么？

$(document).on("keypress keyup blur", ".tblTxtRanges", function (event) {
    //this.value = this.value.replace(/[^0-9\.]/g,'');
    $(this).val($(this).val().replace(/[^-?[0-9]+(\.[0-9]+)?]/g, ''));
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && (event.which != 45 || $(this).val().indexOf('-') != -1)) {
        event.preventDefault();
    }
});

由於這不會解決用戶在文本框中復制和粘貼值時的問題，因此我添加了一個更改事件功能，以將值替換為有效的小數。 但這並不能替代價值。 （正則表達式中有任何錯誤嗎？replace函數之后的值相同）

$(document).on("change", ".tblTxtRanges", function (event) {
    var newVal = $(this).val().replace(/[^-?[0-9]+(\.[0-9]+)?]/g, '');
    $(this).val(newVal);
});

此代碼有效， 但復制粘貼到textbox時無效 。 輸入時，我們也可以輸入減號。 （例如002-56.36）。 由於我正在尋找較舊的瀏覽器兼容性，因此需要jQuery解決方案。

還有更好的主意嗎？ 我可以在正則表達式中更改以替換其他字符的任何內容嗎？

Answer 1

您的主要問題來自嘗試檢查每個按鍵的事實。 除了不能很好地復制和粘貼值外，對於用戶而言，無法隨意更改值（即使這意味着暫時將其設為無效的十進制值）也是一種令人沮喪的體驗。 稍微放松一下驗證，然后簡單地測試輸入的值。

無需在每次按鍵上都進行驗證，只需使用change事件來驗證整個字符串。 我建議使用正則表達式以確保該值適合該模式。 如果驗證失敗，請准備好使用舊值填寫字段。

如果驗證成功，則保存當前值（例如，設置屬性data-oldValue），然后驗證失敗，則可以還原先前的驗證值（如果未找到，則為空）。

為了增加效果，您可以添加一個指示錯誤的類，以向用戶提供輸入值沒有用的立即反饋。

希望有幫助！