angularjs force en majuscule dans la zone de texte
J'ai essayé d'utiliser le filtre majuscule mais cela ne fonctionne pas. J'ai essayé de le faire de deux manières:
<input type="text" ng-model="test" uppercase/>
et
<input type="text" ng-model="{{test | uppercase}}"/>
Le 2nd déclenche une erreur javascript:
Erreur de syntaxe: le jeton 'test' est inattendu et attend [:]
Je veux que le texte soit forcé en majuscule lorsque l'utilisateur tape dans la zone de texte.
Comment puis je faire ça?
Veuillez voir l'autre réponse ci-dessous, qui est supérieure à celle-ci.
cette réponse est basée sur la réponse ici: Comment autocapitaliser le premier caractère d'un champ de saisie dans AngularJS? .
J'imagine que ce que vous souhaitez serait une fonction d'analyse comme celle-ci:
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>La réponse acceptée pose des problèmes si quelqu'un tente de saisir une lettre minuscule au début d'une chaîne existante. Le curseur se place à la fin de la chaîne après chaque pression sur une touche. Voici une solution simple qui répond à tous les problèmes:
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");
}
};
})
Voici un violon: http://jsfiddle.net/36qp9ekL/1710/
L'idée est de montrer (et non de transformer) la chaîne en majuscule côté client et de la transformer en majuscule côté serveur (les utilisateurs peuvent toujours contrôler ce qui se passe côté client). Alors:
1) dans le html:
<input id="test" type="text" ng-model="test">
ici pas de transformation en majuscule.
2) dans le css:
#test {text-transform: uppercase;}
les données sont affichées en majuscules, mais en réalité toujours en minuscules, si l'utilisateur est entré en minuscules . 3) convertissez la chaîne en majuscule côté serveur lors de l'insertion dans la base de données.
= = = = = = pour jouer, vous pouvez essayer de suivre:
<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">
mais je pense que les méthodes ng-change ou ng-blur ne sont pas nécessaires dans votre cas.
Vous ne pouvez pas créer de filtre sur ng-model puisqu'il doit être assignable. la solution de contournement est soit un analyseur, soit simplement un changement.
<input ng-model="some" ng-change="some = (some | uppercase)" />
Cela devrait marcher.
Lorsqu'il est utilisé avec Bootstrap, ajoutez simplement text-uppercase à l'attribut de classe de l'entrée.
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();
}
voici mon violon http://jsfiddle.net/mzmmohideen/36qp9ekL/299/
N'oubliez pas d'inclure ' ngSanitize ' dans votre module!
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
}
};
});
Faire attention à "?" dans "require: '? ngModel '," ... alors seulement ma demande a été traitée.
"if (inputValue) {...}" Pour qu'aucune erreur non définie ne se produise
Cela ne fonctionnera pas du tout.
ng-model permet de spécifier quel champ/propriété de la portée doit être lié au modèle. De plus, ng-model n'accepte pas une expression en tant que valeur. Les expressions dans angular.js sont des choses entre {{ et }}.
Le filtre uppercase pourrait être utilisé dans la sortie et partout où les expressions sont autorisées.
Vous ne pouvez pas faire ce que vous voulez, mais vous pouvez utiliser le text-transform de CSS pour au moins tout afficher en majuscule.
Si vous voulez avoir la valeur d'un champ de texte en lettres majuscules, vous pouvez y parvenir avec du JavaScript personnalisé.
Dans votre contrôleur:
$scope.$watch('test', function(newValue, oldValue) {
$scope.$apply(function() {
$scope.test = newValue.toUpperCase();
}
});
Lorsque vous utilisez bootstrap:
Première approche: Utilisation de la classe text-majuscule
<input type="text" class="text-uppercase" >
Deuxième approche: Utiliser un style qui peut être appliqué avec la classe existante
<input type="text" class="form-control" style="text-transform: uppercase;">
c'est juste une alternative, vous pouvez utiliser ce "text-transform: capitalize;" dans votre css et l'entrée de texte sera mise en majuscule. sauf si l'utilisateur le tape en lettres majuscules partout.
c'est juste une alternative ^^
Solution avec correction du curseur
.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
}
};
});
Pour améliorer la réponse de Karl Zilles , voici la révision de sa solution . Dans ma version, l’espace réservé n’est pas modifié en majuscule et fonctionne également si vous souhaitez créer une expression régulière sur la chaîne. Il prend également le "type" de la chaîne d'entrée (null ou indéfini ou vide):
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)));
}
}
}
});