angularjs – Angular js输入框输入和暂停

发布时间：2020-12-17 07:14:57 所属栏目：安全来源：网络整理

导读：我是角度js的新手,并且使用带角度js的xmpp服务,我有一种情况,我需要在用户开始输入输入框时发送输入,并在用户停止输入时暂停. 我有基本的想法,我需要使用$timeout,并有一个变量,如vm.isTyping = false; 我也为此写了一些平台. vm.isTyping = false;vm.checkT

我是角度js的新手,并且使用带角度js的xmpp服务,我有一种情况,我需要在用户开始输入输入框时发送输入,并在用户停止输入时暂停.

我有基本的想法,我需要使用$timeout,并有一个变量,如vm.isTyping = false;

我也为此写了一些平台.

vm.isTyping = false;
vm.checkTyping = function(){
    $timeout(function() {
        vm.isTyping = true;
    },2000);

    if(!vm.isTyping){
        vm.sendTyping();
    } else{
        //
    }
};

这是输入字段代码：

<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 />

我面临的问题是,每当用户按任意键时,我都无法发送打字,在第一次按键时发送一个打字然后我应该在用户停止输入时发送暂停.

任何人都可以帮我实现角度js中的代码来实现这一目标.

解决方法

您可以尝试的是输入标记中包含ng-keyup属性.因此,当用户开始输入时,您可以设置标志vm.isTyping = true.当用户在ng-keyup处理程序中停止输入时会超时,这将在一段时间后设置vm.isTyping = false.请参阅以下代码snipet

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!