anglejs erzwingt Großbuchstaben im Textfeld

70

Ich habe versucht, den Großbuchstabenfilter zu verwenden, aber er funktioniert nicht. Ich habe es auf zwei Arten versucht:

<input type="text" ng-model="test" uppercase/>

und

<input type="text" ng-model="{{test | uppercase}}"/>

Der 2. löst einen Javascript-Fehler aus:

Syntaxfehler: Token 'Test' ist unerwartet und erwartet [:]

Ich möchte, dass der Text in Großbuchstaben geschrieben wird, während der Benutzer das Textfeld eingibt.

Wie kann ich das machen?

Sam
quelle

Antworten:

105

Bitte beachten Sie die andere Antwort unten, die dieser überlegen ist.

Diese Antwort basiert auf der Antwort hier: Wie wird das erste Zeichen in einem Eingabefeld in AngularJS automatisch kapitalisiert? .

Ich würde mir vorstellen, dass Sie eine Parser-Funktion wie diese wünschen würden:

angular
  .module('myApp', [])
  .directive('capitalize', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
          if (inputValue == undefined) inputValue = '';
          var capitalized = inputValue.toUpperCase();
          if (capitalized !== inputValue) {
            // see where the cursor is before the update so that we can set it back
            var selection = element[0].selectionStart;
            modelCtrl.$setViewValue(capitalized);
            modelCtrl.$render();
            // set back the cursor after rendering
            element[0].selectionStart = selection;
            element[0].selectionEnd = selection;
          }
          return capitalized;
        }
        modelCtrl.$parsers.push(capitalize);
        capitalize(scope[attrs.ngModel]); // capitalize initial value
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <input type="text" ng-model="name" capitalize>
</div>

GHC
quelle
perfekt, das habe ich gebraucht. Ich habe dieses Beispiel nicht gesehen. Ich denke, der Großbuchstabenfilter war ein bisschen falsch für mich ... Danke
Sam
4
Dies ist eine praktische Anweisung! Es kann jedoch hilfreich sein, wenn Sie vor dem Aufrufen einer Methode die Existenz von inputValue getestet haben.
Matt Jensen
2
Der Push (Großschreibung) wurde in "Verschieben" (Großschreibung) geändert, aber ansonsten hat es gut funktioniert. Danke.
Christophe Geers
+1 Ich war über eine Stunde lang festgefahren, um herauszufinden, warum $parsersund habe $formattersdie Eingabesteuerung nicht aktualisiert. Hinzufügen der Anrufe zu $setViewValueund $renderhat den Trick gemacht. Ich werde das Angular-Team bitten, dies zu den Dokumenten hinzuzufügen.
Reactgular
9
Sie können den Auswahlstart der Eingabe vor und nach dem Rendern zurücksetzen, damit sich der Cursor nicht nach jedem Tastendruck zum Ende der Zeichenfolge bewegt. var selection = element[0].selectionStart; modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); element[0].selectionStart = selection; element[0].selectionEnd = selection;
Rucsi
67

Die akzeptierte Antwort verursacht Probleme, wenn jemand versucht, am Anfang einer vorhandenen Zeichenfolge einen Kleinbuchstaben einzugeben. Der Cursor bewegt sich nach jedem Tastendruck zum Ende der Zeichenfolge. Hier ist eine einfache Lösung, die alle Probleme behebt:

directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function(input) {
                return input ? input.toUpperCase() : "";
            });
            element.css("text-transform","uppercase");
        }
    };
})

Hier ist eine Geige: http://jsfiddle.net/36qp9ekL/1710/

Karen Zilles
quelle
4
Es ist jedoch zu beachten, dass die CSS-Texttransformation den Text lediglich in Großbuchstaben auf dem Bildschirm darstellt, der an das Modell gebundene Wert jedoch nicht. Während die akzeptierte Antwort andere unbeabsichtigte Konsequenzen haben kann (wie das Anstoßen des Cursors bis zum Ende), kann dies je nach den Anforderungen auch der Fall sein.
Mattygabe
3
Der an das Modell gebundene Wert wird vom $ -Parser in Großbuchstaben geschrieben. Oder beziehen Sie sich auf das Wertattribut des Eingabeelements? In diesem Fall sind Sie richtig.
Karen Zilles
1
Ah - bezog sich nicht unbedingt darauf und verpasste das Parser-Stück irgendwie. Ich habe Ihr Beispiel überflogen und mich sofort auf die Texttransformation konzentriert, die auf das Element angewendet wird. Ich werde meine eigene Hand schlagen,
Mattygabe
Korrigieren Sie mich, wenn ich falsch liege, aber ich denke $(element)und bin elementgleichwertig.
Robert4
3
Sehen Sie diese Antwort , um Platzhalter wie sie sind zu behalten
Jaydo
35

Die Idee ist, die Zeichenfolge auf der Clientseite als Großbuchstaben anzuzeigen (nicht zu transformieren) und auf der Serverseite in Großbuchstaben umzuwandeln (Benutzer können jederzeit steuern, was auf der Clientseite geschieht). Damit:

1) im HTML:

<input id="test" type="text" ng-model="test">

hier keine Großbuchstabenumwandlung.

2) in der CSS:

#test {text-transform: uppercase;}

Daten werden in Großbuchstaben angezeigt, aber tatsächlich immer noch in Kleinbuchstaben, wenn der Benutzer Kleinbuchstaben eingibt. 3) Verwandeln Sie die Zeichenfolge beim Einfügen in die Datenbank auf der Serverseite in Großbuchstaben.

= = = = = zum Herumspielen kann man versuchen:

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

Ich denke jedoch, dass ng-change- oder ng-blur-Methoden für Ihren Fall nicht erforderlich sind.

Timathon
quelle
Nun funktioniert das und es ist einfach! Das ist also das Beste! :) Danke PS, ich habe auch ng-keydown verwendet, um sicherzustellen, dass der Benutzer die Magie früher sieht :)
BlackBurn027
29

Sie können keinen Filter für das ng-Modell erstellen, da es zuweisbar sein muss. Die Problemumgehung ist entweder Parser oder einfach ng-change.

<input ng-model="some" ng-change="some = (some | uppercase)"  />

Das sollte funktionieren.

qwerty_igor
quelle
2
Funktioniert perfekt
Milo Cabs
Beste Lösung für mich bisher!
Coderpc
Ich würde dies als Lösung auswählen. Einfach und Wert an Backend übergeben auch Großbuchstaben.
Sh4m
16

Bei Verwendung mit Bootstrap fügen Sie einfach text-uppercasedas Klassenattribut der Eingabe hinzu.

Ludovic Guillaume
quelle
1
Sie können dies dann hinzufügen : ::-webkit-input-placeholder { text-transform: none; } ::-moz-placeholder { text-transform: none; } :-ms-input-placeholder { text-transform: none; } input:-moz-placeholder { text-transform: none; }. Fügen Sie .text-uppercasediese Klassen bei Bedarf hinzu.
Ludovic Guillaume
Es funktionierte auf der Benutzeroberfläche, aber der Modellwert ist immer noch niedrig
Diego
1
Wenn Sie das Modell in Großbuchstaben ändern möchten, müssen Sie die $ parser des Modellcontrollers wie oben beschrieben verwenden. Diese Lösung ist nur visuell.
Ludovic Guillaume
Sie können die Bootstrap-Klasse für visuelle Zwecke und in Ihrem Controller mithilfe der Funktion toUperCase () verwenden, bevor Sie Ihr Modell verwenden
Emmanuel P.
6
one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

Hier ist meine Geige http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

Mohideen bin Mohammed
quelle
Diese Lösung ist wunderbar - nur die wenigen Zeilen, die es braucht. Es scheint meine zu löschen, die ng-patternich verwende, um eine MAC-Adresse mit einem regulären Ausdruck zu validieren. Irgendwelche Ideen, wie ich beide zum Arbeiten bringen kann? jsfiddle.net/630dkL15
SpaceNinja
Ich kann deine Frage nicht verstehen ... Du hast Großbuchstaben für deine Eingabe und du wirst sie mit mac_regex vergleichen, stimmt das? und in Ihrer jsfiddle einen externen Link gefunden, beschreibt es über Großbuchstaben den angegebenen Text beim Binden nicht für ng-Modell- oder Laufzeit-Eingaben. das wird für Winkelausgabe funktionieren, die darin binden wird {{}}
Mohideen bin Mohammed
1
jsfiddle.net/mzmmohideen/oqzs0w8m hier ist mein JSFIDDLE. Wenn Sie die Mac-Adresse richtig eingeben, bedeutet dies, dass sie korrekt angezeigt wird. Andernfalls wird sie falsch zurückgegeben und Sie müssen sich keine Gedanken über Kleinbuchstaben machen. Wenn Sie den Mac am Ende korrekt eingeben, wird sie in Großbuchstaben geschrieben
Mohideen bin Mohammed
@SpaceNinja hast du bekommen was du willst?
Mohideen bin Mohammed
Ich mag Ihre Lösung. Ich kann sie verwenden, wenn ich keine Lösung finde, die AS vom Benutzertyp großschreibt, anstatt am Ende, wenn die Validierung abgeschlossen ist. Ich hatte gehofft zu sehen, was das Problem mit dem Konflikt von ng-Muster und ng-Änderung war - jsfiddle.net/rod9pLom/3
SpaceNinja
2

Dies wird überhaupt nicht funktionieren.

ng-modeldient zur Angabe, welches Feld / welche Eigenschaft aus dem Bereich an das Modell gebunden werden soll. Auch ng-modelnicht einen Ausdruck als Wert annehmen. Ausdrücke in angle.js sind Dinge zwischen {{und }}.

Der uppercaseFilter kann in der Ausgabe und überall dort verwendet werden, wo Ausdrücke zulässig sind.

Sie können nicht tun, was Sie tun möchten, aber Sie können CSS verwenden text-transform, um zumindest alles in Großbuchstaben anzuzeigen.

Wenn Sie den Wert eines Textfelds in Großbuchstaben haben möchten, können Sie dies mit einem benutzerdefinierten JavaScript erreichen.

In Ihrem Controller:

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});
TheHippo
quelle
Gute Antwort, ich nehme GHC's, da es näher an dem ist, was ich will (unter Verwendung eines Attributs in der Ansicht)
Sam
2

Vergessen Sie nicht, ' ngSanitize ' in Ihr Modul aufzunehmen!

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

  • Achten Sie auf "?" in "require: ' ? ngModel '" ... hat erst dann meine Bewerbung funktioniert.

  • "if (inputValue) {...}" Es tritt kein undefinierter Fehler auf

Deivid
quelle
1

Bei Verwendung von Bootstrap:

Erster Ansatz: Verwenden von Klassentext in Großbuchstaben

<input  type="text" class="text-uppercase" >

Zweiter Ansatz: Verwenden eines Stils, der auf vorhandene Klassen angewendet werden kann

<input  type="text" class="form-control" style="text-transform: uppercase;">

Hier ist mein stackBlitz: https://angular-nvd7v6forceuppercase.stackblitz.io

Palash Roy
quelle
0

Es ist nur eine Alternative. Sie können diese "Texttransformation: Großschreibung" in Ihrem CSS verwenden und die Texteingabe wird großgeschrieben. es sei denn, der Benutzer gibt es überall in Großbuchstaben ein.

es ist nur eine alternative ^^

user1999385
quelle
0

Um die Antwort von Karl Zilles zu verbessern, ist dies meine Überarbeitung seiner Lösung. In meiner Version wird der Platzhalter nicht in Großbuchstaben geändert und funktioniert auch, wenn Sie einen regulären Ausdruck für die Zeichenfolge erstellen möchten. Es wird auch der "Typ" der Eingabezeichenfolge (null oder undefiniert oder leer) verwendet:

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});
Matteo Gaggiano
quelle
0

Lösung mit Cursor-Shift-Fix

.directive('titleCase', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '';
                    let retInput = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });
AkRoy
quelle
0

Wenn Sie Modell und Wert ändern möchten, verwenden Sie:

angular.module('MyApp').directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind("blur change input", function () {
                ngModel.$setViewValue($(this).val().toUpperCase());
                $(this).val($(this).val().toUpperCase());
            });
            element.css("text-transform","uppercase");
        }
    };
});

Fügen Sie dann Ihrem HTML-Eingabetext Großbuchstaben hinzu

<input  type="text" uppercased />
Sergio Marsilli
quelle
-1

Ich würde nur den Filter selbst in der Steuerung verwenden:

 $filter('uppercase')(this.yourProperty)

Denken Sie daran, dass Sie diesen Filter einspritzen müssen, wenn Sie ihn beispielsweise in einem Controller verwenden möchten:

app.controller('FooController', ['$filter', function($filter) ...
Raeffray
quelle