2016-05-13 2 views
1

Мне нужно, чтобы некоторые символы, введенные в поле ввода, отображались. Когда пользователь вводит что-то во входные данные, мне нужно проверить, соответствует ли он определенным критериям, и если это так - символ должен появиться во входе (как обычно), но если нет - ничего не должно произойти.Удалить символы, введенные во вход

Так есть ли какое-то событие, которое я могу уловить, прежде чем набранный символ появится во вводе?

Plunker

<body ng-app="changeExample"> 
    <script> 
    angular.module('changeExample', []) 
     .controller('ExampleController', ['$scope', function($scope) { 
     $scope.var = 'a'; 
     }]) 

     .directive('changeValue', function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, elem, attrs, ctrl) { 
      elem.on('input', function() { 
       if(ctrl.$viewValue !== 'a') { 
       scope.var = ''; 
       } 
      }); 

      ctrl.$formatters.push(function(value) { 
       return value === 'a' ? value : ''; 
      }); 
      } 
     } 
     }); 
    </script> 
    <div ng-controller="ExampleController"> 
    <input type="text" ng-model="confirmed" change-value ng-change="change()"/> 
    </div> 
</body> 
+0

[Plunker] (https://plnkr.co/edit/ueyvq5vNjWoNSHkyEyM7?p=preview) –

+0

Я редактировал огромную часть вашего вопроса. Пожалуйста, не стесняйтесь редактировать, если я пропустил вашу проблему. – Zanon

+0

Спасибо. Я думаю, это то, что мне нужно –

ответ

1

Вы можете использовать ngChange директиву для выявления и удаления нежелательных символов.

В приведенном ниже примере поле ввода не принимает знак $.

angular.module('changeExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
    
 
    var FORBIDDEN_SYMBOL = '$'; 
 
     
 
    $scope.change = function() { 
 

 
     var newChar = $scope.confirmed.slice(-1); 
 

 
     if (newChar === FORBIDDEN_SYMBOL) { 
 
     
 
     var inputSize = $scope.confirmed.length; 
 
     $scope.confirmed = $scope.confirmed.substring(0, inputSize -1); 
 
     } 
 
    } 
 
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="changeExample" ng-controller="ExampleController"> 
 
    <input type="text" ng-model="confirmed" ng-change="change()" /> 
 
</div>

Смежные вопросы