键入小数位时，HTML 5“数字”类型输入没有值答案

【问题标题】：HTML 5 "number" type input has no value when typing a decimal place键入小数位时，HTML 5“数字”类型输入没有值
【发布时间】：2016-03-14 17:30:35
【问题描述】：

我正在编写一个混合移动应用程序，它使用 HTML 5 数字字段来显示正确的键盘。该应用程序有一个屏幕，其中值实时更新，允许小数位。

需要明确的是，小数位有效，并且可以输入 - 这不是问题。

该应用程序是用 AngularJS 编写的，我尝试使用 jqLite 直接从元素中获取值，并通过 ng-model 使用分配的范围值。

这是它的行为方式：

输入1，值为1
输入2，值为12
输入3，值为123
输入.，根据Angular值为undefined，直接取值时为""。
输入4，值为123.4
输入5，值为123.45

通常这不是什么大问题，但我试图强制在无效输入进入 Angular 之前将其拒绝。我采取的方法是隐藏数字输入，并在其后面显示有效输入，这样看起来就像他们正在输入并且只能输入有效输入。这很有效，直到他们输入 .，然后数字消失，并在他们继续时返回。

有没有办法从 HTML 5 number 类型输入中获取值，而 . 后面没有值？

如果没有，有没有办法在输入进入 Angular 之前拒绝输入（在 keydown 时，preventDefault 不起作用，因为没有可靠的方法在 number 类型字段中获取完整的当前输入）？

【问题讨论】：

标签： javascript angularjs html

【解决方案1】：

如果您试图阻止将任何输入分配给用户输入的模型，您可以通过将事件对象显式传递给您分配给模板中ng-keydown 的方法来公开事件对象。在这种情况下，我将创建一个在输入字段本身上接受事件对象和作用域模型的方法，然后检查输入是否确实是可取的。如果是，则将值分配给需要更新的模型。

<!-- template -->
<input <input ng-model="testValue" ng-keydown="validateValue($event, value)">

以及在 $scope 上的控制器中

//in the controller
    $scope.testValue = '';
    $scope.modelToAssignValue = '';

    $scope.validateValue = function($evt, value) {
     if (($evt.keyCode >= 48 && $evt.keyCode <= 57) ||
        ($evt.keyCode >= 96 && $evt.keyCode <= 105) || 
          ($evt.keyCode = 190)) {
     $scope.modelToAssignValue = value;
     }
    };

【讨论】：

这很好，但它需要验证整个值——而不仅仅是当前输入的字符。否则，例如 123.456.789.012 将被允许通过。我有一个带有文本输入的工作解决方案，但它依赖于能够获取当前光标位置 - HTML5 数字输入无法做到的另一件事。

【解决方案2】：

如果这是您想要的行为，您应该实现custom vaildation，在其中检查输入并在选择元素时允许点，离开元素将触发验证。

我自己的意见，虽然可能无关紧要，但是当用户输入123. 时显示验证错误并在他继续输入时将其删除是可以的，但这只是我。

【讨论】：

那很好，但要求是它不能让你输入无效值（即，如果你按下一个按钮，这将是一个无效的结果，那么它就可以了没有）。如果它是一个文本字段，我可以让它完美地工作，因为当前值始终存在于输入中。
那么为什么不让它成为一个常规的文本字段并实现你自己的验证呢？禁止常规字符，只允许数字和一个点。你可以为它构建一个正则表达式。
这就是目前的折衷方案，但是当你查看应用程序时，你会得到一个普通的键盘（这是一个混合应用程序，如前所述）——它不是很好的用户体验，真的应该显示数字键盘.而且在建议之前，我们不能使用tel，或者iOS数字键盘输入模式，因为键盘需要有.才能输入小数点。