javascript AngularJs Ng-Keypress 事件工作不正常?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24750502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 03:18:48  来源:igfitidea点击:

AngularJs Ng-Keypress event working wrongly?

javascriptangularjs

提问by Ramasamy Kanna

I am developing an application in Angularjs. I am using ng-keypress event in input type=text. While typing value in text I'm getting wrong values in the keypress function. For example, the first time if I type "1" I am getting undefined. Second time, typing any other value gives the first value

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

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

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

回答by Shelby L Morris

You'll want to use ng-keyupinstead.

你会想要使用ng-keyup

ng-keypresshappens as the key is pressed, and BEFORE the value populates the input. This is why you're not getting any value on the first keypress, but on subsequent presses you will.

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

Use ng-keyupand your problem is solved, as it happens once the value has already populated the input.

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

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

ng-keypressis working as intended, but it is not the directive applicable to your requirements.

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

Working plunkr: http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

工作 plunkr:http://plnkr.co/edit/OHWDZo68siDlcrXnLyzJ?p=preview

回答by Zhonk

The keypress event is fired when a key is pressed down and that key normally produces a character value (use input instead). https://developer.mozilla.org/en-US/docs/Web/Events/keypress

当一个键被按下并且该键通常会产生一个字符值时会触发 keypress 事件(使用 input 代替)。 https://developer.mozilla.org/en-US/docs/Web/Events/keypress

So neither the input field value nor the scope value(apply/digest loop etc.) will reflect the expected input value.

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

Solution is depending on your requirements. Here are some:

解决方案取决于您的要求。这里有一些:

1) Use another event on the inputfield: change, keyup, ...

1) 在 inputfield 上使用另一个事件:change、keyup、...

2) Use the $event object in your listener method:

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

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

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

3) Create a watcher for your NodeId_1 value within your scope:

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

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

回答by Jorge Santos Neill

The watcher function work for me, I attached my example

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

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

The html code is the following

html代码如下

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