如何使用AngularJs从输入或textarea中删除特殊字符?

时间:2016-03-03 15:43:56

标签: javascript html angularjs

我正在尝试实现AngularJs指令从输入和textarea中删除任何特殊字符,但它不起作用,我在控制台中看不到任何错误。当用户向字段中添加文本时,我也有工具提示,它在工具提示中显示字符数,如果我将下面的文本添加到输入和textarea,则数字不正确。

任何帮助将不胜感激我是AngularJS的新手,如何使用Angular指令实现此任务?

main.html中

<textarea rows="2" class="form-control"
    ng-model="processDTO.processStatementText"
    name="processStatement" id="processStatement"
    no-special-char
    placeholder="Process Statement" maxlength="4000" required
    data-tooltip-html-unsafe="<div>{{4000 - processDTO.processStatementText.length}} characters left</div>"
    tooltip-trigger="{{{true: 'focus', false: 'never'}[processDTO.processStatementText.length >= 0 || processDTO.processStatementText.length == null ]}}"
    tooltip-placement="top" tooltip-class="bluefill">
</textarea>

specialCharacterDirective.js

 angular.module('App').directive('noSpecialChar', function() {
   'use strict'
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, element, attrs, modelCtrl) {
        modelCtrl.$parsers.push(function(inputValue) {
          if (inputValue == null)
            return ''
         var cleanInputValue = inputValue.replace(/[^\w\s]/gi, '');
          if (cleanInputValue != inputValue) {
            modelCtrl.$setViewValue(cleanInputValue);
            modelCtrl.$render();
          }
          return cleanInputValue;
        });
      }
    }
  });

doc.text

6.  The Risk/Control reference id is seen on the Process Search grids, but when I search by Risk/Control, I don’t see the corresponding control/risk grid having the ref id column however tool tip has it
7.  The label change “Originating Source System Process/Risk/Control ID” is not done in View/Search Inventory tool tips of Process, Risk, Control grids, It has to be fixed for all the 3 searches “By Process/Risk/Control”
2.  Upload Template Header – Risk Causal and Impact comments are color coded as mandatory but they are optional. Similary the Originating Source System Process/Risk/control ID
3.  In the upload template, for any of the multi value fields, I use an invalid delimiter ‘:’, Eg: 13:7 , for some reason this changes the cell format to time format and thereafter I am not able to give any single values, its always converted to time format. Not sure if this is a training issue, but want to put it on the table to see if it requires any fix at all
4.  In Upload, for the grid field length validations, the filter doesn’t works on Row Number and Max Allowed columns. ~!@#$%^&*()_+|}{:"?><,./';[]\=-0987654321`
5.  ERH All levels added in the View End to End ERH screen – Sort and Filter doesn’t works, After clicking on this field, none of the other filter/sort works on the page. Also the sort indicator(black triangle) is not visible, I believe the column width needs to be adjusted.
6.  The Risk/Control reference id is seen on the Process Search grids, but when I search by Risk/Control, I don’t see the corresponding control/risk grid having the ref id column however tool tip has it
7.  The label change “Originating Source System Process/Risk/Control ID” is not done in View/Search Inventory tool tips of Process, Risk, Control grids, It has to be fixed for all the 3 searches “By Process/Risk/Control”
2.  Upload Template Header – Risk Causal and Impact comments are color coded as mandatory but they are optional. Similary the Originating Source System Process/Risk/control ID
3.  In the upload template, for any of the multi value fields, I use an invalid delimiter ‘:’, Eg: 13:7 , for some reason this changes the cell format to time format and thereafter I am not able to give any single values, its always converted to time format. Not sure if this is a training issue, but want to put it on the table to see if it requires any fix at all
4.  In Upload, for the grid field length validations, the filter doesn’t works on Row Number and Max Allowed columns. ~!@#$%^&*()_+|}{:"?><,./';[]\=-0987654321`

1 个答案:

答案 0 :(得分:0)

试试这个:

&#13;
&#13;
angular.module("test", []).filter("purger", function() {
    	return function(input) {
      	    return input.replace(/[^\w\s]/gi, "");
        }
    }).controller("testController", function($scope, purgerFilter) {
    	$scope.value = purgerFilter("^..test/$");
        $scope.onChange = function() {
      	    $scope.value = purgerFilter($scope.value);
        }
    })
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="test" ng-controller="testController">
    <textarea type="text" ng-model="value" ng-change="onChange()" row=2></textarea>
</body>
&#13;
&#13;
&#13;