Convertir en majuscules en tant que types d'utilisateurs en utilisant javascript

je veux convertir des caractères minuscules en majuscules comme les types d'utilisateurs en utilisant javascript. Toutes les suggestions sont les bienvenues.

j'ai essayé la suivante:

$("#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;
    }
});
36
demandé sur Butcher 2011-04-06 22:57:26

12 réponses

$("#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
répondu Shaz 2011-04-06 19:04:08
css

#textbox{text-transform:uppercase}
54
répondu kennebec 2011-04-06 19:03:58

ça pourrait être une bonne solution. Il suffit de le mettre dans votre CSS:

input#textbox {
    text-transform: uppercase;
}

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

$upper_data = strtoupper($_POST['textbox']);
9
répondu Andres SK 2011-09-21 23:58:10

ce code fonctionne très bien à l'entrée et textarea sans délai ou changement de majuscule

$("#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
répondu Yann86 2017-05-23 11:46:40

essayez ce script css ça me va.

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

pour information, ce que vous voyez peut-être en majuscules mais c'est en fait ce que vous tapez Si vous tapez" Test "il s'affiche comme" TEST "mais quand vous passez par val() il s'affiche comme"Test".

si vous voulez qu'il soit en majuscules pour de vrai, alors ajoutez un script ci-dessous sur l'événement comme flou de l'objet ou elenent que vous avez besoin.

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

Et si vous voulez utiliser pour objet spécifique ajoutent de script comme ce que j'ai utilisé maintenant

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

input[attr='value']{
text-transform:uppercase;
}
3
répondu percayahati 2014-04-15 07:28:38
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)" />

Edit:

, La plus plus simple est en utilisant des css:

#txtId {text-transform:uppercase}
1
répondu Vishrant 2015-12-30 05:16:15
$(document).ready(function () {
        $("#textbox").keyup( function (e) {
            var str = $(this).val();
            $("#textbox").val(str.toUpperCase());
});
});
1
répondu T rakesh 2016-06-03 22:05:22

puisque vous avez étiqueté ceci comme une question de jQuery aussi bien, voici une solution de 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());
    }
});

utilisant keypress empêche l'effet "rebond" que keyup a (keydown fait aussi, mais l'événement.ce qui ne distingue pas directement entre les majuscules et les minuscules ici--la vérification des clés de changement est désordonnée en raison du verrouillage des caps). Aussi, cela fonctionne sur le caractère d'entrée, le convertit en majuscule, puis l'ajoute à la valeur existante, plutôt que de d'abord l'ajout et puis convertir le tout en majuscules comme la plupart des autres solutions que j'ai vu faire. Enfin, il convertit en fait le caractère plutôt que de lui appliquer un style de formatage comme le fait CSS. Tout cela donne un meilleur contrôle, en particulier dans les situations où certains caractères doivent être forcé de majuscules et d'autres pas, comme dans les numéros de série ou autre.

EDIT: (quatre ans plus tard)!

Je n'ai jamais été heureux avec comment jQuery / javascript gère le changement des clés en majuscules au fur et à mesure qu'elles sont saisies. J'ai été sur toutes les suggestions dans ce post, et aucun d'entre eux (moins de moi) tout à fait fonctionner parfaitement. C'est irritant pour moi, car c'était une question simple dans les vieux jours VB6 pour changer le caractère KeyAscii qui a été passé à L'événement KeyPress. Quoi qu'il en soit, tout à fait par accident, j'ai trouvé une sorte de solution "art noir" qui fonctionne parfaitement aussi loin que je l'ai testé. Ce qui signifie Qu'il fonctionne dans Chrome, il correctement gère n'importe quelle position de curseur sur le texte, il (avec un certain travail) ne change pas le comportement de mise au point du navigateur, et il change de façon fiable en majuscule sans aucune sorte de jittery montrant de minuscules d'abord. Alors que la solution CSS fait aussi tout cela, comme d'autres l'ont observé, elle a l'inconvénient d'avoir à forcer programmatiquement les caractères sous-jacents à l'majuscule quand vous avez besoin de la chaîne réelle pour travailler, ce qui peut être un problème pour garder la trace et donc ne se balance pas bien. Alors, j'ai pensé Je pourrais écrire ça, au cas où quelqu'un le trouve utile.

Cette solution ne dépend pas du petit de Josh Bush (180 lignes de code, pour ceux qui s'inquiètent de la surabondance de dépendance) Plugin D'entrée masqué de digitalbush , qui est solide comme le roc et fait ce qu'il fait très bien. Si vous changez event.which en une autre valeur, et appelez ensuite la méthode mask() (spécifiez le gestionnaire de clavier en premier et le masque en second dans votre code) le changement va persister.

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: '' })

masque ne supporte pas beaucoup de types de masque nativement: littérales, alpha, numériques et alphanumériques sont il. Si vous voulez la ponctuation ou ce que vous avez à rouler votre propre en utilisant regex. (Si vous faites cela, vous devrez garder à l'esprit que la même correspondance 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 de fantaisiste). En mon particulier case, j'avais besoin de tous les capuchons, plus les espaces et les virgules. Le ? dans la chaîne de masque signifie que les caractères suivants sont optionnels, donc celui-ci me donne jusqu'à 20 caractères. Comme je n'avais pas besoin de masque pour montrer, j'ai utilisé une chaîne vide pour un placeholder.

que tout fonctionne parfaitement, sauf pour le petit problème: si vous voulez garder la façon dont le navigateur sélectionne le texte lors de tabbing dans le champ, vous devez faire du travail supplémentaire. J'ai dû pirater le code du masque. pour obtenir ce que je voulais.

j'ai d'abord essayé de simplement sélectionner le texte dans un gestionnaire d'événement de focus, qui fonctionne normalement quand j'appelle focus() à partir d'un gestionnaire de keydown. Cela n'a pas fonctionné ici; le curseur a juste été réglé à la fin du texte comme il le ferait sur un clic de souris là. J'ai essayé de changer le trousseau en espace. Cela a eu pour résultat de remplir le texte avec suffisamment d'espaces pour remplir la limite spécifiée, et de sélectionner le tout.

j'ai essayé quelques des techniques ici , mais le meilleur d'entre eux (c.-à-d. celui qui a réellement fonctionné dans ce cas) n'applique toujours pas le surligneur jusqu'à ce que la touche vers le haut, ce qui signifie qu'il y a un décalage dans quand il se produit, et il ne se produit pas du tout si vous tenez la touche vers le bas jusqu'à ce qu'il se répète et arrive de laisser aller quand le foyer est dans la boîte.

donc j'ai creusé dans le code du masque. Comme il s'avère, le plugin a un accent gestionnaire d'événement qu'il utilise pour configurer le masque de l'indicateur (dire, (___) ___-___-____ pour un téléphone) dans la boîte quand vous vous concentrez sur elle. C'est le comportement que vous voulez la plupart du temps, mais pas ici, car il remplace le texte sélectionné avec le texte sélectionné concaténé à la partie du masque indicateur qui n'a pas été rassasiée. Quand vous n'avez pas d'indicateur de masque, cela a pour effet de désélectionner le texte dans la boîte comme cela se produirait si vous assigniez programmatiquement la valeur texte de la boîte.

j'ai décidé de hacker le masque code un peu. J'ai d'abord essayé de commenter l'ensemble du gestionnaire d'événements focus, ce qui a eu pour effet de ne pas montrer le masque d'entrée sur d'autres champs où je le voulais. J'ai trouvé une alternative moins invasive. J'ai changé ce (actuellement jquery.maskedinput.js, ligne 164):

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

à ceci:

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

ceci contourne la configuration de l'indicateur de masque si vous avez paramétré votre placeholder à une chaîne blanche, ce qui permet au navigateur de se focaliser natif comportement à prendre place.

encore une chose: si vous utilisez la méthode focus() pour se concentrer sur la zone de texte (par exemple, pour sauver l'utilisateur d'entrée de données de la tendance du navigateur à se déplacer vers des parties inconnues lors de l'utilisation de la touche d'onglet), vous aurez à appeler la méthode select() dans le gestionnaire d'événement de mise au point pour bien surligner le texte ( keybdFocus est un drapeau que j'ai placé lorsque j'appelle l'événement focus() d'un gestionnaire keydown , afin de distinguer d'une 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();
    }
});

Récapitulant les étapes:

  1. Téléchargez le Plugin D'édition masqué de Josh Bush.
  2. changez la ligne de code dans le gestionnaire de mise au point du plugin.
  3. configurer une définition de masque (si nécessaire) pour gérer les caractères que vous voulez.
  4. dans votre KeyPress event handler, utilisez votre technique préférée pour changer E. qui est son équivalent en majuscules. (Important: l'appel au gestionnaire doit précéder l'appel à la méthode mask() dans votre code. Le masque évalue E. ce qui permet de déterminer si le caractère du candidat s'adapte au masque, et apparemment le handler et le code du masque sont tirés dans l'ordre dans lequel ils sont spécifiés.)
  5. fixe la valeur du paramètre à '' lorsque vous appelez la méthode mask() .
  6. si vous appuyez sur la boîte de saisie avec un focus, appelez la méthode select() dans votre gestionnaire d'événements.

bien sûr, si vous voulez juste forcer les caractères à majuscules dans le contexte d'une boîte d'édition masquée typique, vous pouvez omettre les étapes 2 et 4. C'est comment je suis tombé dans cet en premier lieu.

1
répondu BobRodes 2017-05-23 11:46:40

C'est une solution que j'ai trouvée, qui évite également les problèmes avec les paramètres de positionnement changeant en majuscules, et ne fait pas de confusion avec la position du curseur.

Attention: ne modifie pas la "valeur" du champ, seulement l'affichage. Pour cela voir ici: mise à jour de la valeur d'une entrée sans perte de 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;
        }
    });
});

puis Ajouter un attribut en majuscules de données à L'élément HTML:

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

travaillé en Chrome, Firefox et IE9+.

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

0
répondu garryp 2017-05-23 12:10:25

je sais que je suis en retard à la fête, mais j'aimerais vous 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 des espaces vides intacte
  • capitalise l'entrée immédiatement (au moment de la fermeture)
  • ne déplace pas le curseur
  • capitalise la valeur de l'entrée si elle est pré-peuplée

js Fiddle ici

0
répondu Chris Hodges 2016-12-01 18:48:26

alors que L'approche CSS + Server Side UCase est probablement "meilleure", voici une solution jQuery côté Client que j'utilise lorsque le besoin se fait sentir:

$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(s){return s.toUpperCase()}));
});

elle n'est pas jolie, mais elle fera le travail!

-1
répondu Campbeln 2012-06-19 03:28:28
$("#id").keyup(function() {
    $(this).val($(this).val().replace(/([a-z])/,function(){
        return $("#id").toUpperCase();
    }));
});

petite correction dans le script ci-dessus cela fonctionnera parfaitement maintenant.

-1
répondu samrat chitta 2012-07-26 14:08:12