Archiv für den Monat Januar 2016

AngularJs mit ngPaste Text abfangen und vor dem Einfügen bearbeiten


Die Direktive “ngPaste” selbst wird von AngularJs ab der Version 1.2.x bereitgestellt und kann z.B. verwendet werden um zu prüfen ob ein Text über die Zwischenablage eingefügt wurde, oder um beim Einfügen von markierten und kopierten Excel Zellen diese vorher noch entsprechend “umzuformatieren”, bevor diese in der passenden Modelvariablen abgelegt werden.

Ein HTML Template snippet welches ngPaste verwendet:

<input type="text"  ng-paste="ctrl.pasted($event)" class="form-control" />
<label ng-bind="ctrl.pastedText"></label>

und der passende Crossbrowser Code um den passenden Text aus der Zwischenablage in JavaScript auszulesen. Denn ngPaste wird nur ausgelöst wenn es sich um ein Paste event handelt, man kann aber nicht direkt über eine Angular Variable auf den Inhalt zugreifen, der sich in der Zwischenablage befindet, dafür muss wieder Standard JavaScript Code verwendet werden.

 public pasted($pasteEvent) {
     var text: string = "";
     //Pasted Event Cross Browser abfangen um an die Daten zu gelangen, die eingefügt wurden.
     if (window.clipboardData) { //IE
         text = window.clipboardData.getData('Text');
     } else if ($pasteEvent.originalEvent.clipboardData) {
         try {
             text = $pasteEvent.originalEvent.clipboardData.getData('text/plain');
         } catch (ex) {
             text = undefined;
         }
     }

     if (text) {
	     //den Text in einer Model Variablen ablegen
         this.pastedText = text.toUpperCase();
         //verhindern das der Originaltext im Input eingefügt wird.
         $pasteEvent.preventDefault();
     }
 }
Advertisements