HTML5 <input type=“number”> 定制

Question

我有一个HTML5输入框（ type = number ）。 我的要求是用户只能通过UP＆DOWN箭头（微调）设置值。 用户不应手动输入该值。 可能吗？

任何帮助表示赞赏！

HTML

<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">