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.
I am attaching a fiddle with the code. You can see the $scope.log
array 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.
Sample fiddle: http://jsfiddle.net/UJWLN/4/
You can use the directive ng-trim in your input and set it to false, like this:
<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:
http://jsfiddle.net/UJWLN/6/
myApp.directive('ngKeystroke', function(){
return {
restrict: 'A',
link: function(scope, elem, attrs){
elem.bind("keyup", function(){
scope.log.push('called');
scope.$digest();
});
}
};
});
To trigger ng-change
event on space-bar also, I have used ng-trim
. And it is working fine.
<textarea ng-model="myCtrl.content" name="content" ng-trim="false" rows="5" cols="15" maxlength="250"></textarea>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With