Geek Answers Handbook

Angular js input box and pause

I am new to angular js and using the xmpp service with angular js, I have a situation where I need to send input when the user starts typing in the input field and pause when the user stops typing.

I have a basic idea that I need to use $ timeout and have one variable of type vm.isTyping = false;

I also wrote some platform for the same.

 vm.isTyping = false; vm.checkTyping = function(){ $timeout(function() { vm.isTyping = true; },2000); if(!vm.isTyping){ vm.sendTyping(); } else{ // } };

This is the input field code:

 <input type="text" placeHolder="Type a message here" ng-model="vm.newMessage" ng-blur="focusRemove(vm.newMessage,vm.contact)" ng-change="vm.checkTyping()" ng-model-options="{'debounce': 500}" ng-keydown="vm.onKeyDown($event)" auto-focus />

The problem that I am facing is that I cannot send typing every time the user presses any key, one input is sent the first time the key is pressed, then I have to pause when the user stops typing.

Can someone help me implement the code in angular js to achieve this.

+5
source share
1 answer

What you can try has the ng-keyup attribute included in the input tag. Therefore, when the user starts typing, you set the flag vm.isTyping = true . When the user stops typing, you have a timeout in your ng-keyup handler that sets vm.isTyping = false after a certain period. Refer to snipet method below

 function myappCtrl($scope, $timeout) { var timoutPromise = null; $scope.newMessage = ""; $scope.isTyping = false; $scope.checkTyping = function() { $scope.isTyping = true; if(timoutPromise) { $timeout.cancel(timoutPromise); } } $scope.stoppedTyping = function() { timoutPromise = $timeout(function() { $scope.isTyping = false; }, 2000) } } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app> <div ng-controller="myappCtrl"> <input type="text" placeHolder="Type a message here" ng-model="newMessage" ng-change="checkTyping()" ng-keyup="stoppedTyping()"/> <div ng-if="isTyping"> typing </div> </div> </div>
+1
source

More articles:


All Articles