web-dev-qa-db-fra.com

Conversion en majuscules en tant que types d'utilisateurs à l'aide de javascript

Je souhaite convertir des caractères minuscules en majuscules à mesure que l'utilisateur utilise le javascript. Toutes les suggestions sont les bienvenues.

J'ai essayé ce qui suit:

$("#textbox").live('keypress', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }
});
javascriptjqueryuppercasekeycode
37
Butcher
$("#textbox").bind('keyup', function (e) {
    if (e.which >= 97 && e.which <= 122) {
        var newKey = e.which - 32;
        // I have tried setting those
        e.keyCode = newKey;
        e.charCode = newKey;
    }

    $("#textbox").val(($("#textbox").val()).toUpperCase());
});
24
Shaz
css

#textbox{text-transform:uppercase}
55
kennebec

Cela pourrait être une solution de contournement de Nice. Il suffit de définir ceci dans votre CSS:

input#textbox {
    text-transform: uppercase;
}

Si vous postez les données sur un script côté serveur (disons php), vous pouvez toujours faire quelque chose comme ceci:

$upper_data = strtoupper($_POST['textbox']);
9
Andres SK

Bonjour, ce code fonctionne très bien en saisie et textarea sans délai ni changement de capitalisation

$("#input").on('input', function(evt) {
              var input = $(this);
              var start = input[0].selectionStart;
              $(this).val(function (_, val) {
                return val.toUpperCase();
              });
              input[0].selectionStart = input[0].selectionEnd = start;
            });

mix from https://stackoverflow.com/a/7944108/1272540 et https://stackoverflow.com/a/13155583/1272540

jsFiddle

5
Yann86

essayez ce script css c'est un travail pour moi.

<style>    
input{text-transform:uppercase};
</style>

pour information, ce que vous voyez peut-être en majuscule, mais c'est en fait ce que vous tapez si vous tapez "Test", il apparaît en tant que "TEST", mais lorsque vous obtenez par val (), il s'affiche en tant que "Test".

si vous voulez que ce soit réellement majuscule, alors ajoutez un script ci-dessous relatif à un événement tel que le flou de l’objet ou de l’élément tel que vous le souhaitez.

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

Et si vous voulez utiliser pour un objet spécifique, ajoutez un script supplémentaire comme ce que j’utilisais maintenant

input[attr]{
text-transform:uppercase;
}

input[attr='value']{
text-transform:uppercase;
}
3
percayahati

Puisque vous avez également identifié cette question comme une question jQuery, voici une solution jQuery simple (bien assez simple):

$('#text_statute_section').on('keypress', function(event) {
    if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
        event.preventDefault();
        $(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
    }
});

L’utilisation de la touche empêche l’effet de "rebond" que possède keyup (keydown aussi, mais event.which ne fait pas directement la distinction entre majuscules et minuscules ici - la vérification des touches Maj est désordonnée du fait de la majuscule). En outre, cela fonctionne sur le caractère d'entrée, le convertit en majuscule, puis l'ajoute à la valeur existante, plutôt que d'ajouter d'abord puis de convertir l'ensemble en majuscule, comme le font la plupart des solutions que j'ai déjà vues. Enfin, il convertit le caractère plutôt que de lui appliquer un style de mise en forme comme le fait CSS. Tout cela donne un meilleur contrôle, en particulier dans les situations où certains caractères doivent être forcés en majuscules et d'autres non, comme les numéros de série ou autres.

EDIT: (quatre ans plus tard)!

Je n'ai jamais été satisfait de la façon dont jQuery/javascript gère la modification des clés en majuscules au fur et à mesure qu'elles sont saisies. J'ai parcouru toutes les suggestions de ce billet, et aucune d'entre elles (la mienne tout au moins) ne fonctionne parfaitement. Cela m’irrite, car il était simple, dans l’ancien jour VB6, de changer le caractère KeyAscii transmis à l’événement KeyPress. Quoi qu’il en soit, tout à fait par accident, j’ai trouvé une sorte de solution «black art» qui fonctionne parfaitement si je l’ai testée. Cela signifie que cela fonctionne dans Chrome, il gère correctement n’importe quelle position du curseur sur le texte, cela ne change pas le comportement du focus du navigateur et il passe de manière fiable en majuscule sans aucune sorte de sifflement minuscule en premier. Bien que la solution CSS réponde également à tous ces problèmes, comme d’autres l'ont fait remarquer, elle présente l'inconvénient de forcer par programmation les caractères sous-jacents à être en majuscule lorsque vous avez besoin de la chaîne utilisée, ce qui peut s'avérer fastidieux. pas d'échelle bien. J'ai donc pensé écrire ceci au cas où quelqu'un le trouverait utile.

Cette solution dépend du peu de Josh Bush (180 lignes de code, pour ceux qui craignent une dépendance excessive) Masked Input Plugin de digitalbush , qui est solide comme le roc et fait très bien ce qu'il fait. Si vous remplacez event.which par une autre valeur et appelez ensuite la méthode mask() (spécifiez d'abord le gestionnaire de frappe et le masque en second dans votre code), la modification sera conservée.

Voici un peu de code:

$.mask.definitions['b'] = '[A-Z, ]';

$('#txtMyInput').on('keypress', function(e) {
    e.which =     String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })

Le masque ne prend pas en charge de nombreux types de masque de manière native: littéraux, alpha, numériques et alphanumériques. Si vous voulez de la ponctuation ou tout ce que vous avez à rouler vous-même, utilisez regex. (Si vous faites cela, vous devrez garder à l'esprit que la même correspondance de regex est appliquée à chaque caractère, un à la fois, sans tenir compte des autres caractères, de sorte que vous ne pouvez rien faire d'extraordinaire). Dans mon cas particulier, j'avais besoin de majuscules, d'espaces et de virgules. Le ? dans la chaîne de masque signifie que les caractères suivants sont facultatifs, donc celui-ci me donne jusqu'à 20 caractères. N'ayant besoin d'aucun masque à afficher, j'ai utilisé une chaîne vide pour un espace réservé.

Tout cela fonctionne parfaitement, sauf le petit problème: si vous souhaitez conserver la manière dont le navigateur sélectionne le texte lors de la tabulation dans le champ, vous devez effectuer un travail supplémentaire. J'ai fini par devoir pirater le code du masque pour obtenir ce que je voulais.

J'ai d'abord essayé simplement de sélectionner le texte dans un gestionnaire d'événements de focus, qui fonctionne normalement lorsque j'appelle focus() à partir d'un gestionnaire de touches. Cela n'a pas fonctionné ici; le curseur vient de se positionner à la fin du texte comme il le ferait avec un clic de souris. J'ai essayé de changer l'espace réservé pour un espace. Cela a eu pour résultat de remplir le texte de suffisamment d'espaces pour remplir la limite spécifiée et de sélectionner le tout. 

J'ai essayé certaines des techniques ici , mais les meilleures d'entre elles (c'est-à-dire celle qui a réellement fonctionné dans ce cas) n'appliquent toujours pas la surbrillance jusqu'à ce que vous augmentiez la tonalité, ce qui signifie qu'il y a un décalage dans l'exécution, cela ne se produit pas du tout si vous maintenez la touche enfoncée jusqu'à ce qu'elle se répète et que vous laissiez aller lorsque le focus est dans la boîte.J'ai donc creusé dans le code du masque. Il se trouve que le plug-in dispose également d'un gestionnaire d'événements de focus qu'il utilise pour configurer l'indicateur de masque (par exemple, (___) ___-___-____ pour un téléphone) dans la boîte lorsque vous faites la mise au point. C’est le comportement que vous souhaitez la plupart du temps, mais pas ici, car il remplace le texte sélectionné par le texte sélectionné concaténé à la partie de l’indicateur de masque qui n’a pas encore été remplie. Lorsque vous n'avez pas d'indicateur de masque, cela a pour effet de désélectionner le texte dans la zone, comme ce serait le cas si vous affectiez par programme la valeur de texte de la zone.

J'ai décidé de pirater un peu le code du masque. J'ai d'abord essayé de commenter l'intégralité du gestionnaire d'événements de focus, ce qui a pour effet de ne pas afficher le masque de saisie dans les autres champs où je le voulais. J'ai donc trouvé une alternative moins invasive. J'ai changé cela (actuellement jquery.maskedinput.js, ligne 164): 

}).on("focus.mask", function() { if (!input.prop("readonly") { // etc. 

}).on("focus.mask", function() {
    if (!input.prop("readonly") && settings.placeholder.length > 0) {

focus() pour vous concentrer sur la zone de texte (par exemple, pour sauver l'utilisateur de la saisie de données de la tendance du navigateur à rechercher des parties inconnues lors de l'utilisation de la touche de tabulation), vous devrez appeler la méthode select() dans le gestionnaire d'événements focus pour mettre correctement en surbrillance le texte (keybdFocus est un indicateur que j'ai défini lorsque j'appelle l'événement focus() à partir d'un gestionnaire keydown, afin de distinguer le focus généré par la souris):.
$('#txtMyInput').on('keypress', function(e) {
    e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
.focus(function() {
    if (kybdFocus) {
        kybdFocus = false;
        $(this).select();
    }
});

  1. Changez la ligne de code dans le gestionnaire de focus du plugin.
  2. Configurez une définition de masque (si nécessaire) pour gérer les caractères souhaités.
  3. Dans votre gestionnaire d'événements de frappe, utilisez votre technique préférée pour remplacer e.which par son équivalent majuscule. (Important: l'appel du gestionnaire doit précéder celui de la méthode mask() dans votre code. Le masque évalue si pour déterminer si le caractère candidat convient au masque, et apparemment le gestionnaire et le code du masque sont déclenchés. dans l'ordre dans lequel ils sont spécifiés.).
  4. Définissez la valeur d'espace réservé sur '' lorsque vous appelez la méthode mask(). 
  5. Si vous appuyez sur la zone de saisie avec un focus, appelez la méthode select() dans votre gestionnaire d'événements de focus.
  6. Bien sûr, si vous souhaitez simplement forcer les caractères à se mettre en majuscule dans le contexte d’une zone d’édition masquée typique, vous pouvez omettre les étapes 2 et 4. C’est ainsi que j’ai été pris au piège.
Of course, if you just want to force characters to uppercase in the context of a typical masked edit box, you can omit steps 2 and 4. That's how I fell into this in the first place.
1
BobRodes
$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});
1
T rakesh

Je sais que je suis assez tard pour la fête, mais j'aimerais offrir ceci:

(function ( $ ) {

  var displayUppercase = function ($element) {
    if ($element.val()) {
      $element.css('text-transform', 'uppercase');
    } else {
      $element.css('text-transform', 'none');
    }
  };

  $.fn.displayAsUppercase = function() {
    $(this).each(function() {
        var $element = $(this);
      displayUppercase($element);
      $element.on('input', function(){displayUppercase($element)});
    });
    return this;
    };

}( jQuery ));

Il a ces avantages:

  • Garde la capitalisation de l'espace réservé intacte
  • Capitalise immédiatement l'entrée (sur la touche)
  • Ne déplace pas le curseur
  • Capitalise la valeur de l'entrée si elle est préremplie

JS Fiddle ici

1
Dobin the Code Horse
function changeToUpperCase(event,obj) {
    charValue = (document.all) ? event.keyCode : event.which;
    if (charValue!="8" && charValue!="0" && charValue != "27"){
        obj.value += String.fromCharCode(charValue).toUpperCase();
        return false;
    }else{
        return true;
    }
}

<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />

Modifier:

Le plus simple {moyen le plus simple} _ consiste à utiliser css:

#txtId {text-transform:uppercase}
1
Vishrant

C’est une solution que j’ai proposée, qui évite également les problèmes liés au remplacement des espaces réservés par des majuscules et ne dérange pas la position du curseur.

Attention: ne change pas la "valeur" du champ, seulement l'affichage. Pour cela, voir ici: Mise à jour de la valeur d'une entrée sans perdre la position du curseur

$(function() {
    $("[data-uppercase='1']").on('keypress', function (e) {
        var $this = $(this);
        var placeholder = $this.attr('placeholder');
        if(placeholder && placeholder.length > 0) {
            this["_placeholder"] = placeholder;
            $this.attr('placeholder', '');
        }
        $this.css('text-transform', 'uppercase');
    }).on('keyup blur', function () {
        var $this = $(this);
        if ($this.val().length < 1) {
            $this.css("text-transform", "");
            $this.attr("placeholder", this["_placeholder"]);
            this["_placeholder"] = undefined;
        }
    });
});

Ajoutez ensuite un attribut data-majuscule à l'élément HTML:

<input type="text" data-uppercase="1" />

A travaillé dans Chrome, Firefox et IE9 +.

Fiddle: https://jsfiddle.net/GarryPas/ptez7q0q/3/

0
garryp