Convertir en majuscules comme types d'utilisateur à l'aide de javascript

$("#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());
});

Cela pourrait être une bonne solution. Juste mettre ceci dans votre CSS:

input#textbox {
    text-transform: uppercase;
}

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

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

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:

Les plus façon la plus simple est par l'utilisation de css:

#txtId {text-transform:uppercase}

Depuis que vous avez marqués ce que jQuery question, ici, d'un simple (bien, assez simple) de jQuery solution:

$('#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'aide de touches empêche le "rebond" effet que keyup a (keydown le fait aussi, mais l'événement.qui ne fait pas la distinction directement entre les majuscules et les minuscules ici--changement de contrôle de clé est en désordre à cause de verrouillage des majuscules). Aussi, cela fonctionne sur le caractère d'entrée, le convertit en majuscule, puis l'ajoute à la valeur existante, plutôt que la première ajoutant, puis en convertissant le tout en majuscules comme la plupart des autres solutions que j'ai vu faire. Enfin, il convertit en fait le personnage plutôt que d'appliquer un style de mise en forme à ce que les CSS ne. 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 la façon dont jQuery/javascript poignées de modification des clés en majuscules comme ils sont saisis. 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, que c'était une simple question dans l'ancien VB6 jours pour changer le KeyAscii personnage qui a été adoptée à l'événement KeyPress. De toute façon, tout à fait par hasard, j'ai trouvé une sorte de "art noir" solution qui fonctionne parfaitement aussi loin que je l'ai testé. Le sens qu'il fonctionne dans Chrome, il gère correctement quelque soit la position du curseur sur le texte, c' (avec peu de travail) ne modifie pas le navigateur de mire du comportement, et de manière fiable les changements de majuscules, sans aucune sorte de nervosité montrant de minuscules premier. Alors que le CSS solution de tout cela, comme d'autres l'ont observé, il a l'inconvénient d'avoir par programmation de la force sous-jacents des caractères en majuscules lorsque vous avez besoin de la chaîne de travailler avec, ce qui peut être embêtant pour garder une trace de et, par conséquent, n'est pas à l'échelle. Alors, j'ai pensé que je pourrais écrire ça, au cas où quelqu'un le trouve utile.

Cette solution ne dépend Josh Bush peu (180 lignes de code, pour ceux qui s'inquiètent de la dépendance dilatation) Masked Entrée Plugin de digitalbush, qui est solide comme le roc et fait ce qu'il fait très bien. Si vous modifiez event.which à une autre valeur, et d'appeler la mask() méthode par la suite (spécifier le gestionnaire de pression de touche de la première et de la deuxième masque dans votre code) le changement persiste.

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 prend pas en charge de très nombreux types de masques en natif: les littéraux, alpha, numérique et alphanumérique sont il. Si vous voulez des signes de ponctuation ou ce que vous avez à rouler votre propre en utilisant les regex. (Si vous faites cela, vous aurez besoin de garder à l'esprit que le même regex match est appliquée à chacun des caractères un à un, sans tenir compte des autres personnages, de sorte que vous ne pouvez pas faire quelque chose de compliqué). Dans mon cas particulier, j'ai besoin de tous les bouchons, plus les espaces et les virgules. Le ? dans le masque chaîne signifie que les caractères suivants sont optionnels, ce qui me donne jusqu'à 20 caractères. Depuis je n'ai pas besoin d'un masque pour montrer, j'ai utilisé une chaîne vide pour un espace réservé.

Que tout fonctionne parfaitement, sauf pour un petit problème: si vous voulez garder la manière dont le navigateur sélectionne le texte lors de la tabulation dans le domaine, vous devez faire un travail supplémentaire. J'ai fini par avoir à pirater le masque de code pour obtenir ce que je voulais.

J'ai d'abord essayé, il suffit de sélectionner le texte dans un foyer de gestionnaire d'événements, qui fonctionne normalement quand je l'appelle focus() à partir d'un keydown gestionnaire. Il n'a pas de travail ici; le curseur juste a obtenu à la fin du texte, comme il le ferait sur un clic de souris il. J'ai essayé de changer l'espace réservé à un espace. Cela a abouti à un rembourrage le texte avec assez de places pour remplir la limite spécifiée, et en sélectionnant l'ensemble de la chose.

J'ai essayé quelques techniques ici, mais le meilleur d'entre eux (c'est à dire celle qui a effectivement travaillé dans ce cas) ne s'applique pas à la mettre en surbrillance jusqu'à la touche, ce qui signifie qu'il y a un décalage quand il arrive, et il n'arrive pas à tous, si vous maintenez la touche enfoncée jusqu'à ce qu'elle se répète et se laisser aller lorsque le focus est dans la boîte.

Alors j'ai creusé dans le masque de code. Comme il s'avère, le plugin a un accent gestionnaire d'événement qu'il utilise pour configurer le masque de l'indicateur (par exemple, (___) ___-___-____ pour un téléphone) dans la boîte lorsque 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. Lorsque vous n'avez pas de masque indicateur, ce qui a pour effet de désactiver l'option le texte dans la case juste que se passerait-il si vous par programme affecté la valeur de texte de la boîte.

J'ai décidé de pirater le masque de code un peu. J'ai d'abord essayé de commenter l'ensemble de l'accent gestionnaire d'événement, qui a eu pour effet de ne pas montrer le masque de saisie sur d'autres domaines où je le voulais. Donc, j'ai trouvé une alternative moins invasive. J'ai changé ce (actuellement jquery.maskedinput.js, la ligne 164):

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

à ceci:

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

Cela contourne la configuration du masque de l'indicateur si vous avez réglé votre espace réservé à une chaîne vide, ce qui permet au navigateur natif de l'accent comportement à prendre place.

Encore une chose: si vous utilisez le focus() méthode pour se concentrer sur la zone de texte (par exemple, pour le sauvetage de la saisie des données utilisateur à partir du navigateur tendance à errer à des pièces inconnues lors de l'utilisation de la touche tab), vous devrez appeler la select() méthode dans la mise au point de gestionnaire d'événement pour bien mettre en évidence le texte (keybdFocus est un indicateur I lorsque j'appel le focus() événement à partir d'un keydown gestionnaire, de façon à distinguer, à partir d'une souris générés par la mise au point):

$('#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écharger Josh Bush Masked Edit Plugin.
2. Modifiez la ligne de code dans le plugin de mire du gestionnaire.
3. Définir un masque de définition (si nécessaire) pour gérer les caractères que vous voulez.
4. Dans votre gestionnaire d'événements keypress, utilisez votre technique préférée pour modifier l'adresse e.qui à son équivalent en majuscule. (Important: l'appel au gestionnaire de doit précéder l'appel à la mask() méthode dans votre code. Le masque évalue e.pour déterminer si le candidat personnage s'adapte le masque, et apparemment, le gestionnaire et le masque de code sont placés dans l'ordre dans lequel ils sont indiqués.)
5. Définir la valeur de l'espace réservé à '' lorsque vous appelez la mask() méthode.
6. Si vous touchez la zone de saisie avec un accent, appelez le select() méthode dans votre attention du gestionnaire d'événement.

Bien sûr, si vous voulez juste la force des caractères en majuscules dans le cadre typique d'une zone d'édition masquée, vous pouvez omettre les étapes 2 et 4. C'est comment je suis tombé dans cet en premier lieu.

C'est une solution, je suis venu avec, ce qui évite également les problèmes avec des espaces réservés de modification de majuscules, et ne plaisante pas avec la position du curseur.

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

Puis ajouter des données en majuscules attribut à l'élément HTML:

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

Travaillé dans Chrome, Firefox et IE9+.

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

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

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