加號 html 輸入 type=number

Question

有誰知道是否可以在 html input type=number 字段中添加加號？ 我有一個場景，用戶需要輸入一個修飾符值，該值是 +1 到 +10 或 -1 到 -10。 我想讓用戶非常明確地知道他們輸入的值會增加結果值。 因此，如果在正輸入值前加上 + 號，那就太好了。

我在帶有引導樣式的 Angular2 反應形式中使用此輸入。 所以歡迎使用 Angular2 指令、boostrap 風格甚至 jquery 解決方案

到目前為止，我所看到的是在表單控件中添加貨幣符號或添加 + 和減號按鈕來增加和減少值。 但這不是我想要的，所以我懷疑這是否可能。

Answer 1

不，這是不可能的。 數字字段只接受- 、 0-9和e輸入。 作為一種解決方法，您可以在輸入之前將+放在 HTML 中，例如：

 + <input type="number" />

或者，您可以使用標准type="text"輸入，但這意味着創建您自己的驗證邏輯，這會使代碼更加復雜。

Answer 2

我認為不可能操縱輸入。 默認為負數的“-”，正數沒有符號。

即使您檢查了創建 UI 框架，例如：

Jquery UI、Bootstrap、Angular Material ...

我想唯一的解決方案是編寫自己的自定義代碼。

有兩種方案可用：

1-帶有文本的輸入和操作將在 javascript 中。

2-在 angular2 中創建一個管道並將其提供給元素。 我認為這比第一個容易得多。

Answer 3

我希望這對你們有幫助！！

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).on('keypress','#input',function (e) { var keyCode = e.which; if ($(this).val().trim().charAt(0) == "\+") { if ( keyCode == 43 ) { return false; } } else{ for (var i = 1; i < $(this).val().length+1; i++) { if(i!=0){ if ( keyCode == 43 ) { return false; } } } } }); $(document).on('input', '#input', function() { this.value = this.value.replace(/[^+{1}|^0-9]/g,''); }); </script>