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输入呈现为“数字”类型时，让用户只需让那一面上下左下箭头。

我尝试将“禁用”或“只读”属性添加到HTML输入中，但这并没有给出我想要的结果。当我这样做时，整个文本框被禁用...

我在想这可能是通过jQuery以某种方式完成的？有人可以帮助我吗？

P.S。所以我想通过键盘禁用文本框中的输入，但仍然在文本框中保留上/下箭头以供用户更改值，这样用户就无法输入他们想要的任何内容，比方说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

您将遇到的问题是不同的浏览器支持和渲染类型=＆＃34;数字＆＃34;不同。我建议一个数字读出的span元素（如果你需要将它作为输入，我会隐藏它），并使用样式按钮或元素来增加，减少数量和更新输入框。这将为浏览器提供统一的用户体验。

<!--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();
    });
});

jQuery禁用文本框输入的类型编号

3 个答案: