Customizing-Anweisung, um den Benutzer auf die Eingabe von Sonderzeichen zu beschränken: Winkel Js

Ich lerne im Detail über angularJs Richtlinie. Momentan verwende ich es, um den Benutzer einzuschränken, keine Sonderzeichen einzugeben.Customizing-Anweisung, um den Benutzer auf die Eingabe von Sonderzeichen zu beschränken: Winkel Js

hier ist der Code

HTML

<input type="text" no-special-char ng-model="vm.customTag" class="form-control" value="" />

AngularJS Richtlinie

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

hier sind zwei Dinge, die ich

(1) uns wollen er kann minus/dash '-' eingeben, das gerade nicht passiert, wie kann ich meine /[^\w\s]/gi ändern, die dem Benutzer erlauben, - (Strich/minus) Zeichen auch einzugeben.

(2) Die obige Funktionalität beschränkt den Benutzer nur auf die Eingabe eines Sonderzeichens, aber wenn der Benutzer ein Sonderzeichen eingibt, möchte ich auch einen roten Alarm anzeigen "Sonderzeichen sind nicht erlaubt", wie kann ich TU das ??

Jede Hilfe wird geschätzt !!!

Dank

Quelle

2016-03-30 shreyansh

aber der Ersetzungscode sollte alle Sonderzeichen entfernen .. erklären Sie über die Zeichen, die unter speziellen Zeichen kommt. –

Ich möchte nicht, dass der Benutzer ~! @ # $%^& *() {} []?/+ =, * 'Eingibt, es sollte alphanumerisch + minus (-) + _ (Unterstrich) sein, erlaubt – shreyansh

Sehen Sie sich die eckige Formularvalidierung an. Ich würde empfehlen, die Eingabe als ungültig zu markieren und die Formularvalidierung mit der Anzeige des Fehlers zu beauftragen. Außerdem würde ich nicht empfehlen, das zu ändern, was der Benutzer eingibt, es ist besser, ihnen zu sagen, dass sie etwas falsch machen, anstatt das, was sie tun, auf magische Weise zu verändern. –

Frage # 1

Derzeit ist Ihre RegEx alle Zeichen auswählen, die nicht ([^) ein Wortzeichen (\w) oder Leerzeichen sind (\s). Um eine - einzuschließen, muss sie in die Liste der Zeichen aufgenommen werden, die nicht ersetzt werden sollen.

Versuchen Sie, die folgende RegEx:

/[^\w\s-]/gi

Um andere Zeichen ausschließen entfernt werden, nur fügen Sie sie nach dem -

Live Demo on RegExr

Frage # 2

Sie müssen auf das Formular keypress hören, um jedes Mal zu sehen, wenn sich der Inhalt ändert. Sie können dann .match() verwenden, um festzustellen, ob Sonderzeichen vorhanden sind. Wenn sie dies tun, wird eine Zeichenfolge zurückgegeben, die truthy ist, andernfalls wird false zurückgegeben.

Sie können das Ergebnis der .match() in einer if-Anweisung überprüfen, und wenn ein Sonderzeichen übereinstimmt, fügen Sie Ihre Nachricht hinzu.

if (inputValue.match(/[^\w\s]/gi)) { 
    // Add Alert Here! 
}

Alternativ in Ihrem if (cleanInputValue != inputValue), könnten Sie den Code hinzufügen um die Warnung zu erstellen. Ihre if Erklärung gibt Ihnen im Grunde das gleiche Ergebnis wie die .match() Methode.Es erkennt, ob der String durch den .replace() geändert wurde und führt den Code innerhalb wenn es

Quelle

2016-03-30 09:17:36 Druzion

das ist, was ich suche Frage 2, wie kann ich Alert (Bootstrap Alarm) innerhalb der Direktive hinzufügen, so dass auch wenn ich 100 Textfelder habe ich kann es wieder verwenden, indem Sie den Namen der Direktive als ein Attribut an das Eingabefeld – shreyansh

@Shreyansh Mmmm .... Ich bin mir nicht sicher, wie ich das tun soll, fürchte ich. – Druzion

Edited weiter Kommentare hat:

Das tut, was Sie beschreiben, nicht in einer besonders „Angular“ Art und Weise - aber erreicht Ihr beschriebenes gewünschtes Ergebnis.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ns.test"> 
<head> 
    <title>Test</title> 
    <!-- http://stackoverflow.com/questions/36303590/customizing-directive-to-restrict-the-user-to-input-special-characters-angular --> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 

    <style> 
     .input { 
      padding: 20px; 
      margin: 50px; 
     } 

      .input input { 
       border: solid 1px black; 
       font-family: Tahoma; 
       font-size: larger; 
       padding: 5px; 
      } 

     .err { 
      color: red; 
      padding: 5px; 
      margin: 10px; 
      font-family: Tahoma; 
      font-size: larger; 
      display:inline; 
     } 
    </style> 

    <script type="text/javascript"> 

     var app = angular.module('ns.test', []); 

     app.controller('testController', function ($scope) { 
      $scope.item = 'item1'; 
      $scope.item2 = 'item2'; 
      $scope.item3 = 'item3'; 
      $('input:first').focus(); 
     }); 

     var noSpecialChar = function() { 
      return { 
       restrict: 'A', 
       require: '?ngModel', 
       link: function (scope, elm, attr, modelCtrl) { 
        if (!modelCtrl) return; 

        modelCtrl.$parsers.push(function (inputValue) { 
         if (inputValue == null) 
          return '' 

         var parent = $(elm).parent(); 

         cleanInputValue = inputValue.replace(/[^a-z0-9-_]+/gi, ''); 
         if (cleanInputValue != inputValue) { 
          if (parent.find(".err").length == 0) 
           parent.append("<div class=\"err\">Invalid Characters</div>"); // change the class here to your bootstrap alert classes 
         } else 
          parent.find(".err").remove(); 

         return cleanInputValue; 
        }); 
       } 
      }; 
     }; 

     app.directive('noSpecialChar', noSpecialChar); 

    </script> 
</head> 
<body data-ng-controller="testController"> 
    <form name="userForm" novalidate> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item" /> 
     </div> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item2" /> 
     </div> 
     <div class="input"> 
      <input type="text" data-no-special-char data-ng-model="item3" /> 
     </div> 
    </form> 
</body> 
</html>

Quelle

2016-03-30 09:44:41 Nathan

Ich schätze Ihre Antwort, aber ich möchte nicht ng-Muster verwenden, weil ich 100 Textfelder in meiner Anwendung an verschiedenen-2 Stellen habe, wieder muss ich diese HTML-Sachen zu Textfeld hinzufügen, die ich nicht will, was ich bin Suche nach ist, ich möchte rote Alarm-Box zeigen Fehler, der innerhalb der Direktive implementiert ist – shreyansh

Ich bin auf der Suche nach einer benutzerdefinierten Direktive, mit der ich diesen Direktivennamen als Attribut zu n Anzahl von Textfeldern hinzufügen kann. – shreyansh

@shreyansh aktualisiert - lassen Sie mich wissen, wenn Sie danach suchen. – Nathan

Customizing-Anweisung, um den Benutzer auf die Eingabe von Sonderzeichen zu beschränken: Winkel Js

Antwort

Verwandte Themen