J'utilise un sap.m.Input dans mon application SAPUI5 et je souhaite que le texte de saisie dans ce champ soit affiché en majuscules / en majuscules uniquement. La valeur réelle est formatée sur un backend avec la validation des données.
Existe-t-il une propriété prête à l'emploi pour activer le mode majuscules?
J'ai vérifié les propriétés de contrôle sur l'API Reference, mais impossible de trouver quelque chose de similaire.
Une extension de question:
Autant que je sache, la solution alternative à JS est d'utiliser une propriété CSS: text-transform: uppercase; et d'attacher ce style au code sap.m.Input contrôleur.
La question est de savoir quelle approche est la plus préférable du point de vue des performances - utiliser un code basé sur CSS ( text-transform ) ou basé sur JS ( liveChange ) technique?
4 Réponses :
Vous pouvez le faire avec le événement liveChange :
onLiveChange: function(oEvent) {
var input = oEvent.getSource();
input.setValue(input.getValue().toUpperCase());
}
Dans votre contrôleur, vous définissez la fonction:
<Input liveChange = "onLiveChange"></Input>
Si elle doit afficher votre valeur initiale dans votre contrôle d'entrée, vous pouvez définir un formateur qui formate votre chaîne en majuscules.
J'ai étendu la question, solution basée sur CSS vs JS. Que pensez-vous, quelle technique est la meilleure?
Le CSS est la meilleure solution car il n'y a pas d'événement attaché.
Eh bien, si vous saisissez l'entrée, un événement sera automatiquement déclenché. Si vous voulez que la valeur d'entrée initiale soit affichée en majuscules, je pense que SAP suggère l'utilisation d'un formateur. Bien que je ne sois pas sûr, votre technique pourrait être meilleure. Je serais intéressé par l'opinion des autres :)
La solution liveChange a un effet secondaire important: chaque fois que je tape un caractère, le chariot de saisie est déplacé à la fin de la ligne, même si je décide de taper quelque chose au milieu du mot ou de la phrase. C'est ennuyeux UX, la solution CSS n'a pas un tel inconvénient.
À ma connaissance, la meilleure solution est d'utiliser le CSS:
.sapMInput.myCustomCSSClass .sapMInputBaseInner {
text-transform: uppercase;
}
... ou vous pouvez attacher un rappel à l'événement "validationSuccess" d'un contrôle d'entrée et dans le rappel, exécuter quelque chose comme ceci:
var oSrc = oEvent.getSource();
if(oSrc && oSrc.setValue){
oSrc.setValue(oSrc.getValue().toUpperCase());
}
Vous trouverez ci-dessous une seule ligne de code que vous n'avez qu'à écrire pour répondre à vos besoins. Pas besoin de contrôleur, tapez-le simplement dans la vue :). Cette approche résout votre problème en utilisant les expressions
<Input value = "{ value: '' constraints: { search: '^[A-Z]*$' } }" />
L'utilisation de la contrainte search signifie qu'il recherchera dans l'entrée et la vérifiera par rapport à la valeur que vous avez définie.
'^ [AZ] * $' signifie uniquement des lettres majuscules, il s'agit d'une expression régulière, ou regex.
Pour activer la gestion automatique des erreurs, ajoutez simplement dans 1 ligne de code sous la section "sap.ui5" de votre manifest.json:
"handleValidation": vrai,
Il affichera automatiquement un message d'erreur pour guider l'utilisateur.
Une autre expression regex que d'autres pourraient trouver utile: '^ [A-Za-z] * $' , ce qui signifie que vous ne peut taper que des lettres alphabétiques, majuscules et minuscules.
Voici une ressource utile sur la validation en ligne: https://sapui5.hana.ondemand.com/#/topic/07e4b920f5734fd78fdaa236f26236d8