如何使用 AngularJs 从输入或文本区域中删除特殊字符？

Posted 2023-05-07

【中文标题】如何使用 AngularJs 从输入或文本区域中删除特殊字符？

【英文标题】：How to remove special character from input or textarea using AngularJs ?

【发布时间】：2018-12-14 01:13:54

【问题描述】：

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

如果我是 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;
        );
      
    
  );

文档文本

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】：

试试这个：

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);
        
    )

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