HTML5 <input type="number">定制

Question

我有一个(type=number). HTML5输入框我的要求是用户应该能够通过上下箭头(旋转器)来设置值。用户不应该能够手动输入值。有可能吗？

任何帮助都是非常感谢的！

<tr ng-repeat="listitem in listitems">
  <input id="qtyinput" style="width:70px;" type="number" ng-model="listitem.qty" placeholder="Quantity" min='1' value='1'>
</tr>

Answer 1

使用：

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

对于AngularJS特定的解决方案，您可以创建一个自定义指令：

angular.module('demo')
.directive('disableKeyboard', function () {
  return function (scope, el) {
    el.keydown(function (e) {
      e.preventDefault();
    }); 
  };
});

并通过以下方式加以应用：

<input disable-keyboard type="number">