Question

我正在编写一个混合移动应用程序，它使用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类型字段中获取完整的当前输入）？

Answer 1

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

我个人认为，虽然可能无关紧要，但是当用户输入div然后在他继续输入时删除它时，可以在验证中显示错误，但那只是我。

Answer 2

如果您试图阻止在用户输入上为模型分配任何输入，则可以通过将事件对象显式传递给模板中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;
     }
    };

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

2 个答案: