web-dev-qa-db-fra.com

Comment forcer la saisie en majuscules dans une zone de texte ASP.NET?

J'écris une application ASP.NET. J'ai une zone de texte sur un formulaire Web et je veux forcer les majuscules quels que soient les types d'utilisateurs. Je voudrais le faire sur le front-end. Vous devez é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 fasse apparaître l'entrée utilisateur en majuscules. Cependant, sous le capot, c'est toujours des minuscules car le contrôle 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.

javascriptasp.nethtmltextboxuppercase
32
Aheho

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

style='text-transform:uppercase'

sur la TextBox, et dans votre code derrière l'utilisation:

Textbox.Value.ToUpper();

Vous pouvez également facilement changer votre expression régulière sur le validateur pour utiliser des lettres minuscules et majuscules. C'est probablement la solution la plus simple que d'imposer des majuscules sur eux.

52
Ryan Abbott

Utilisez un style CSS sur la zone de texte. Votre CSS devrait ressembler à ceci:

.uppercase
{
    text-transform: uppercase;
}

<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;
22
billb

D'accord, après les tests, voici une meilleure solution, 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);

});
9
Robert Green MBA
**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**
7
Vinay Yadav

Vous pouvez intercepter les événements de pression de touche, annuler ceux qui sont en 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 (/[a-z]/.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 .

6
Ates Goral
<!-- 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>
3
SRIKANTH

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

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

  4. la réponse que j'ai trouvée est de l'implémenter sur keyup en conjonction avec la balise 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();
    }
};
2
Vasan Ramani

Je viens de faire quelque chose de similaire 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 le focus.

2
Jason Z
 style='text-transform:uppercase'
2
Diodeus - James MacFarlane

Je le ferais 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 /script dossier.

2
Cyril Gupta

text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase

CssClass

WebControl.CssClass, propriété

vous pouvez en savoir plus à ce sujet - https://developer.mozilla.org/en/docs/Web/CSS/text-transform

https://msdn.Microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.cssclass (v = vs.110) .aspx

utilisez Style="text-transform: uppercase;" ou CssClass="upper"

2
Codeone

Utilisez le CSS de transformation de texte pour le frontal, puis utilisez la méthode toUpper sur votre chaîne côté serveur avant de valider.

1
anon

voici une solution qui a fonctionné pour moi.

http://plugins.jquery.com/project/bestupper

Vous devez obtenir le JavaScript de http://plugins.jquery.com/files/jquery.bestupper.min.js.txt et c'est parti.

Fonctionne comme un charme!

1
Robert Green MBA

J'utilise une simple déclaration en ligne

<asp:TextBox ID="txtLocatorName" runat="server"
 style="text-transform:uppercase" CssClass="textbox"  
 TabIndex="1">
</asp:TextBox>

Si vous ne voulez pas utiliser les classes css, vous pouvez simplement utiliser une déclaration de style en ligne (celle-ci rend simplement les majuscules visiblement) :)

Côté serveur

string UCstring = txtName.Text.ToUpper();
1
Vijay Kumbhoje

Définissez le style sur la zone de texte comme text-transform: uppercase ?

1
Will

CSS pourrait être utile ici.

style="text-transform: uppercase";"

est-ce que cela aide?

1
shahkalpesh
  <telerik:RadTextBox ID="txtCityName" runat="server" MaxLength="50" Width="200px"
                            Style="text-transform: uppercase;">
0
Chetan Sanghani

JavaScript a la fonction "toUpperCase ()" d'une chaîne.

Donc, quelque chose dans ce sens:

function makeUpperCase(this)
{
    this.value = this.value.toUpperCase();
}
0
Stephen Wrighton

Je me rends compte qu'il est un peu tard, mais je n'ai pas trouvé de bonne réponse qui fonctionnait avec ASP.NET AJAX, j'ai donc corrigé le code ci-dessus:

function ToUpper() {
        // So that things work both on FF and IE
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // convert to uppercase version
            if (evt.which) {
                evt.which = char.toUpperCase().charCodeAt(0);
            }
            else {
                evt.keyCode = char.toUpperCase().charCodeAt(0);
            }
        }

        return true;
    }

Utilisé comme tel:

       <asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server" 
             Width="84px" Font-Names="Courier New"></asp:TextBox>
0
NetMage
     $().ready(docReady);

     function docReady() {

            $("#myTextbox").focusout(uCaseMe);
     }

     function uCaseMe() {

            var val = $(this).val().toUpperCase();

            // Reset the current value to the Upper Case Value
            $(this).val(val);
        }

Il s'agit d'une approche réutilisable. N'importe quel nombre de zones de texte peut être fait de cette façon sans les nommer. Une solution à l'échelle de la page pourrait être obtenue en changeant le sélecteur dans docReady.

Mon exemple utilise une focalisation perdue, la question n'a pas précisé lors de la frappe. Vous pouvez déclencher un changement si cela est important dans votre scénario.

0
greg