如何使用 AngularJs 从 input 或 textarea 中删除特殊字符? [英] How to remove special character from input or textarea using AngularJs ?

问题描述

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

I am trying to implement AngularJs directive to remove any special character from input and textarea but its not working and i do not see any error in console. I also have tooltip when user add text to fields it shows character count in the tooltip, numbers are not coming correct if i add below text to the input and textarea.

任何帮助将不胜感激，我是 AngularJS 的新手，我如何使用 Angular 指令完成这项任务?

Any help will be appreciated i am new to AngularJS, How can i achieve this task using Angular directive ?

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

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`

推荐答案

试试这个:

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>

这篇关于如何使用 AngularJs 从 input 或 textarea 中删除特殊字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！