HTML5 <input type="number"> 自定义答案

【问题标题】：HTML5 <input type="number"> customizationHTML5 <input type="number"> 自定义
【发布时间】：2014-03-16 15:38:24
【问题描述】：

我有一个 HTML5 输入框 (type=number)。我的要求是用户应该只能通过向上和向下箭头（微调器）设置值。用户不应手动输入该值。有可能吗？

感谢任何帮助！

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>

【问题讨论】：

只能通过向上向下箭头...就像在键盘上，或者他们点击的可视向上/向下箭头？
只使用 HTML5 自带的上下箭头
纺纱厂，明白了。
@ShouryaSharma 你试过我已经建议的解决方案了吗？
想要这个的理由是什么？

标签： javascript jquery html angularjs

【解决方案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">

【讨论】：

真的吗？ jQuery？你不能把血腥的输入设为只读吗？
@PlantTheIdea 通过将输入设为只读，您将如何使用箭头更改其值？
这就是我问我的问题...键盘上的向上和向下箭头，还是他们点击的视觉向上/向下？微调器不是跨浏览器生产的，如果您依赖它们，您将度过一段糟糕的时光。
@MinkoGechev nvm，看起来旋转器只是他的要求，赞成你的回答。
除了依赖于 JavaScript，因此可以简单地覆盖之外，这种方法意味着不能使用鼠标的人根本不能使用控件，甚至不能使用会激活微调器的键。所以无论真正的疾病（最初的问题）是什么，这种治疗方法一定比疾病更糟。