jQuery禁用文本框輸入的類型編號

Question

我有一個HTML標記，如下所示：

 <input type="number"  step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br />
 <button type="submit" class="btn btn-primary saveBreakEven">Save</button>

如您所見，輸入的類型為“數字” ...我在想（如果可能的話）要做的是禁用最終用戶，這樣他/她就無法在文本框中輸入任何內容，而是使用戶僅具有在瀏覽器將HTML輸入呈現為“數字”類型時獲得的側面scrool上/下箭頭。

我試圖將“ disabled”或“ readonly”屬性添加到HTML輸入中，但這沒有給我想要的結果。 當我這樣做時，整個文本框都被禁用...

我在想這可以通過jQuery完成嗎？ 有人可以幫我嗎 ？

PS所以我想通過鍵盤禁用輸入到文本框中的內容，但仍保留文本框中的向上/向下箭頭供用戶更改值，以便用戶無法輸入他們想要的任何內容，例如99999999999數字..？

Answer 1

您可以做的一件事就是防止keydown事件 。

 $(function() { $('input').on('keydown', function(e) { e.preventDefault(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br /> <button type="submit" class="btn btn-primary saveBreakEven">Save</button> 

這樣，您可以使箭頭保持活動狀態，但可以禁用鍵盤鍵。 在事件對象（e）內，您還可以檢查按下了什么鍵（例如，如果要支持退格鍵或箭頭）。

Answer 2

您將遇到的問題是不同的瀏覽器支持和不同的渲染type =“ number”。 我建議為數字讀數使用一個span元素（ff，您需要將其作為輸入，然后將其隱藏），然后使用樣式化的按鈕或元素來增加，減少數字並更新輸入框。 這將在所有瀏覽器中提供統一的用戶體驗。

<!--style these how you want-->
<span id="number">0</span>
<button id="add>Up</button><button id="sub">Down</button>

<script>
    var step   = 1;
    var output = $('#number');
    var up     = $('#add');
    var sub    = $('#sub');

    up.add(sub).on('click', function() {
      var num = output.val();

      num += ( $(this).attr('id') == 'add' ) ? step : (-1 * step);
      if( isNumValid(num) ) {
        output.val(num);
      } else { <!-- error reporting here --> }

    }

    function isNumValid(num) {
      <!-- run validations here, integer, float, positive, etc -->
      return true/false;
    }

</script>

Answer 3

$(function() {

    $('input[type=number]').on('keydown', function(e){
    e.preventDefault();
    });
});