Javascript Girl
  1. Javascript Girl
  3. Comment puis-je forcer l'entrée en majuscules dans une zone de texte ASP.NET?
Intereting Posts
Exemple de discussion multi-espace node.js Question sur plusieurs ready () 's Comment appliquer 100% de hauteur à div? JQuery ajax succès ne fonctionne pas avec $ (this)? Limites de pays utilisant Google Map API v3 Définition de méthodes prototypes à l'intérieur du constructeur Jquery focus not setting on firefox Javascript: groupes de capture nommés Comment afficher un état de progression / spinner lors de la sortie du fichier via Response.ContentType, Response.End? Window.getComputedStyle ne fonctionne pas pour les propriétés abrégées dans d'autres navigateurs, sauf Chrome L'audio ne fonctionne pas avec phoneGap Pince pour zoomer à l'aide de Hammer.js Comment créer des ID dynamiques pour les balises dans les modèles django Envoyer des données de Python à Javascript (JSON) Gamme de curseurs jQuery

Comment puis-je forcer l'entrée en majuscules dans une zone de texte ASP.NET?

J'écris une application ASP.NET. J'ai une boîte de texte sur un formulaire Web, et je veux forcer tout ce que l'utilisateur tape en majuscules. J'aimerais faire cela sur le front-end. Vous devriez également noter qu'il existe un contrôle de validation sur cette zone de texte, donc je veux m'assurer que la solution n'interfère pas avec la validation ASP.NET.

Clarification: il semble que la transformation de texte CSS rend l'entrée utilisateur apparaissant en majuscules. Cependant, sous le capot, il reste encore minuscule car la commande de validation échoue. Vous voyez, mon contrôle de validation vérifie si un code d'état valide est entré, mais l'expression régulière que j'utilise ne fonctionne qu'avec des caractères majuscules.

Pourquoi ne pas utiliser une combinaison du CSS et du backend? Utilisation: 

style='text-transform:uppercase'

Sur la TextBox, et dans votre code, utilisez: 

 Textbox.Value.ToUpper();

Vous pouvez également modifier facilement votre regex sur le validateur pour utiliser des lettres minuscules et majuscules. C'est probablement la solution plus simple que de forcer les majuscules sur elles.

Utilisez un style CSS dans la zone de texte. Votre CSS devrait être comme ceci: 

 .uppercase { text-transform: uppercase; } <asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;

D'accord, après le test, voici une solution meilleure et plus propre. 

 $('#FirstName').bind('keyup', function () { // Get the current value of the contents within the text box var val = $('#FirstName').val().toUpperCase(); // Reset the current value to the Upper Case Value $('#FirstName').val(val); });

Vous pouvez intercepter les événements de pression de touche, annuler les minuscules et ajouter leurs versions majuscules à l'entrée: 

 window.onload = function () { var input = document.getElementById("test"); input.onkeypress = function () { // So that things work both on Firefox and Internet Explorer. var evt = arguments[0] || event; var char = String.fromCharCode(evt.which || evt.keyCode); // Is it a lowercase character? if (/[az]/.test(char)) { // Append its uppercase version input.value += char.toUpperCase(); // Cancel the original event evt.cancelBubble = true; return false; } } };

Cela fonctionne à la fois dans Firefox et Internet Explorer. Vous pouvez le voir en action ici . 

 **I would do like: <asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>** 
 <!-- Script by hscripts.com --> <script language=javascript> function upper(ustr) { var str=ustr.value; ustr.value=str.toUpperCase(); } function lower(ustr) { var str=ustr.value; ustr.value=str.toLowerCase(); } </script> <form> Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea> </form> <form> Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea> </form>

Je viens de faire quelque chose de semblable aujourd'hui. Voici la version modifiée: 

 <asp:TextBox ID="txtInput" runat="server"></asp:TextBox> <script type="text/javascript"> function setFormat() { var inp = document.getElementById('ctl00_MainContent_txtInput'); var x = inp.value; inp.value = x.toUpperCase(); } var inp = document.getElementById('ctl00_MainContent_txtInput'); inp.onblur = function(evt) { setFormat(); }; </script>

Fondamentalement, le script attache un événement qui se déclenche lorsque la zone de texte perd son focus.

Je ferais cela en utilisant jQuery. 

 <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#txt").keydown(function(e) { if (e.keyCode >= 65 & e.keyCode <= 90) { val1 = $("#txt").val(); $("#txt").val(val1 + String.fromCharCode(e.keyCode)); return false; } }); }); </script>

Vous devez avoir la bibliothèque jQuery dans le dossier /script .

J'ai fait une analyse de ce problème sur quatre versions populaires du navigateur.

  1. La balise de style simple affiche les caractères en majuscules, mais la valeur de contrôle reste en minuscules
  2. La fonctionnalité de pression de touche en utilisant le code char affiché ci-dessus est un peu inquiétante, comme dans le firefox chrome et le safari, il désactive la fonctionnalité à Ctrl + V dans le contrôle.
  3. L'autre problème avec l'utilisation du niveau de caractère vers les majuscules ne traduit pas non plus la chaîne entière en majuscules.

  4. La réponse que j'ai trouvée est de mettre en œuvre ceci sur la touche en combinaison avec la balise de style. 

     <-- form name="frmTest" --> <-- input type="text" size=100 class="ucasetext" name="textBoxUCase" id="textBoxUCase" --> <-- /form --> window.onload = function() { var input = document.frmTest.textBoxUCase; input.onkeyup = function() { input.value = input.value.toUpperCase(); } };

Définissez le style dans la zone de texte en tant que transformation de texte: majuscules ? 

  style='text-transform:uppercase'

Utilisez le CSS de transformation de texte pour le front-end, puis utilisez la méthode toUpper sur votre serveur de chaîne avant de valider.