javascript 输入空格时如何触发 ng-change？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15282942/
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
How can I trigger ng-change when a space is entered?
提问by Tim Withers
I have a function that is called when a textarea's value is changed. It works great, except when the spacebar is pressed, then nothing is called. Is there a way to activate this? Technically, the content is changing, and I would like the function to be called regardless.
我有一个函数，当 textarea 的值发生变化时会调用该函数。它工作得很好，除非按下空格键，然后什么都不调用。有没有办法激活这个？从技术上讲，内容正在发生变化，我希望无论如何调用该函数。
I am attaching a fiddle with the code. You can see the $scope.logarray does not push a new element when the spacebar is pressed (enter key as well), but it does with any other key that is not white space.
我正在附上代码。您可以看到，$scope.log按下空格键时，数组不会推送新元素（也包括 Enter 键），但它会推送任何其他非空格键。
Sample fiddle: http://jsfiddle.net/UJWLN/4/
示例小提琴：http: //jsfiddle.net/UJWLN/4/
回答by odiseo
You can use the directive ng-trim in your input and set it to false, like this:
您可以在输入中使用指令 ng-trim 并将其设置为 false，如下所示：
<textarea ng-change="changeFunction()" ng-model="myModel" ng-trim="false"></textarea>
But this won't work for every case. If you want something to be executed on every single keystroke, try with a custom directive. I wrote one for you:
但这并不适用于所有情况。如果您希望在每次击键时执行某些操作，请尝试使用自定义指令。我为你写了一篇：
myApp.directive('ngKeystroke', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
elem.bind("keyup", function(){
scope.log.push('called');
scope.$digest();
});
}
};
});
回答by Rubi saini
To trigger ng-changeevent on space-bar also, I have used ng-trim. And it is working fine.
为了ng-change在空格键上触发事件，我还使用了ng-trim. 它工作正常。
<textarea ng-model="myCtrl.content" name="content" ng-trim="false" rows="5" cols="15" maxlength="250"></textarea>
回答by rkmax
Better try with this jsfiddle
最好试试这个jsfiddle
html
html
<div ng-controller="MyCtrl">
<textarea key-listener="changeFunction()" ng-model="myModel"></textarea>
<div>{{log}}</div>
</div>
javascript
javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.log=[];
$scope.changeFunction=function(){
$scope.log.push('Called');
}
}
myApp.directive('keyListener', function() {
return function(scope, elm, attrs) {
elm.bind("keyup", function(event) {
scope.$apply(attrs.keyListener);
});
};
})
回答by Eric
If someone ever comes back to this.
如果有人回到这一点。
I just read this in the documentation: https://docs.angularjs.org/api/ng/input/input%5Btext%5DngTrim (optional)
我刚刚在文档中读到了这个： https://docs.angularjs.org/api/ng/input/input%5Btext%5D ngTrim（可选）
boolean
布尔值
If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input.
如果设置为 false Angular 将不会自动修剪输入。对于 input[type=password] 控件，此参数将被忽略，它永远不会修剪输入。
回答by Kailas
For me the following code worked:
对我来说，以下代码有效：
HTML:
HTML：
<input type="text" ng-model="typedEmail" ng-keyup="($event.keyCode == 32) ? validateEmail(typedEmail) : ''">
Controller:
控制器：
$scope.validateEmail = function(emailId){
//Your Code goes here
};
Event code 32: refers to the Spacebar key event code
Similarly,
Event code 13: refers to the Enter key event code
Event code 16: refers to the Shift key event code
Event code 17: refers to the Control key event code
Event code 18: refers to the Alt key event code
事件代码32：指Spacebar键事件代码
同理，
事件代码13：指回车键事件代码
事件代码16：指Shift键事件代码
事件代码17：指Control键事件代码
事件代码18：指的是 Alt 键事件代码
Just refer the ng-keydocumentation, you try out the keyCode values there (down in the example in the angular doc).
只需参考ng-key文档，您就可以尝试那里的 keyCode 值（在 angular 文档中的示例中）。
