AngularJs Ng-Keypress 事件工作错误？答案

【问题标题】：AngularJs Ng-Keypress event working wrongly?AngularJs Ng-Keypress 事件工作错误？
【发布时间】：2014-07-15 05:33:39
【问题描述】：

我正在用 Angularjs 开发一个应用程序。我在输入类型 = 文本中使用 ng-keypress 事件。在文本中输入值时，我在按键功能中得到了错误的值。例如，如果我第一次输入“1”，我会得到undefined。第二次，输入任何其他值都会给出第一个值

<input ng-model="NodeId_1" type="text" ng-keypress="getValue()"/>

 var angularapp = angular.module('nameapp', []);

    angularapp.controller('NameCtrl', function ($scope) {
        $scope.getValue = function () {
            alert($scope.NodeId_1);//Here first time undefined is coming and second what ever we enter first value will come
        }
    }
 )

【问题讨论】：

你能把你的一些代码参考贴在这里
尝试使用 Angular 热键：chieffancypants.github.io/angular-hotkeys
您不需要使用其他库，请参阅下面我的回答，了解您的实施无法正常工作的原因。现场演示等等。

标签： javascript angularjs

【解决方案1】：

您需要改用ng-keyup。

ng-keypress 在按下键时发生，并且在值填充输入之前。这就是为什么您在第一次按键时没有获得任何价值，但在随后的按键中您将获得任何价值。

使用ng-keyup，您的问题就解决了，因为一旦值已经填充了输入，就会发生这种情况。

<input ng-model="NodeId_1" type="text" ng-keyup="getValue()" />

ng-keypress 正在按预期工作，但它不是适用于您的要求的指令。

工作小伙伴：http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

【讨论】：

您可能还想将 $event 传递给您的 getValue() 并检查是否按下了 return(enter) 键 (event.keyCode !=13 )，然后发出警报。 plnkr.co/edit/0PO3U4wp7EtYsPgBDklb?p=preview
返回键和退格键是表单的常用键，OP 可以添加他的应用程序所需的其他键。回答这个问题可能适合专业人士，但初学者需要对这些事情有所了解
哈哈 :D 使用简单的单词和逐步的解释有助于消除魔法部分 :p 但我同意简单的单词和一步一步的有时可能很乏味。让我们不要偏离主题:)
无法做 event.prevetDefault() plnkr.co/edit/yFxdYwIt9EfVFSQ8

【解决方案2】：

当一个键被按下并且该键被触发时，keypress 事件被触发通常会产生一个字符值（改用输入）。 https://developer.mozilla.org/en-US/docs/Web/Events/keypress

因此输入字段值和范围值（应用/摘要循环等）都不会反映预期的输入值。

解决方案取决于您的要求。以下是一些：

1) 在输入字段上使用另一个事件：change、keyup、...

2) 在你的监听器方法中使用 $event 对象：

<input ng-model="NodeId_1" type="text" ng-keypress="getValue($event)"/>

$scope.getValue = function (event) {
    console.log(event)
}

3) 在您的范围内为您的 NodeId_1 值创建一个观察者：

$scope.$watch('NodeId_1', function(newVal) {
    ...
});

【讨论】：

【解决方案3】：

观察者功能对我有用，我附上了我的例子

$scope.$watch('itemm.montoAmodificar', function (newValue) {
    $scope.fnActualizarNuevoSaldoDependencia(parseFloat(newValue));
});

html代码如下

<input ng-model="itemm.montoAmodificar" my-focus class="form-control" type="text" placeholder="Ingrese el monto" ng-keypress="fnActualizarNuevoSaldoDependencia($event);" />

【讨论】：