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

时间:2017-05-05 14:01:00

标签: javascript c# jquery html asp.net

我有一个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。 。?

3 个答案:

答案 0 :(得分: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)中,您还可以检查按下了哪个键(例如,如果您想支持退格键或箭头)。

答案 1 :(得分:0)

您将遇到的问题是不同的浏览器支持和渲染类型=&#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>

答案 2 :(得分:0)

$(function() {

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