鍵入小數位時，HTML 5“數字”類型輸入沒有值

Question

我正在編寫一個混合移動應用程序，它使用HTML 5數字字段來顯示正確的鍵盤。 該應用程序有一個屏幕，其中值實時更新，允許小數位。

要清楚，小數位可以工作，並且可以輸入 - 這不是問題。

該應用程序是用AngularJS編寫的，我嘗試直接從元素中獲取jqLit​​e的值，並通過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

如果這是您想要的行為，您應該實現自定義變量 ，在選中元素時檢查輸入並允許點，並且離開元素將觸發驗證。

我自己的觀點雖然可能無關緊要，但是當用戶輸入123.時，可以在驗證中顯示錯誤123.然后在他繼續輸入時將其刪除，但那就是我。

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;
     }
    };