Comment définir automatiquement la zone de texte en majuscules?

J'utilise l'attribut de style suivant pour définir l'entrée utilisateur en majuscules de sorte que lorsque l'utilisateur commence à taper dans la zone de texte par exemple railway, il doit être modifié en majuscules comme RAILWAY sans que l'utilisateur n'ait à appuyer sur le bouton de verrouillage des majuscules .

Voici le code que j'utilise pour l'entrée:

<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

Mais je n'obtiens pas le résultat souhaité en utilisant cet attribut.

Vous avez mis l' styleattribut sur la <img>balise, au lieu du <input>.

Ce n'est pas non plus une bonne idée d'avoir les espaces entre le nom de l'attribut et la valeur ...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

Veuillez noter que cette transformation est purement visuelle et ne modifie pas le texte envoyé dans POST.

Je pense que la solution la plus robuste qui garantira qu'il est affiché en majuscules est d'utiliser la méthode oninput en ligne comme:

<input oninput="this.value = this.value.toUpperCase()" />

ÉDITER

Certaines personnes se sont plaints du fait que le curseur saute à la fin lors de la modification de la valeur, donc cette version légèrement étendue devrait résoudre ce problème.

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Les réponses avec le text-transformation:uppercasestyle n'enverront pas de données en majuscules au serveur lors de la soumission - ce à quoi vous pouvez vous attendre. Vous pouvez faire quelque chose comme ça à la place:

Pour votre entrée HTML, utilisez onkeydown:

<input name="yourInput" onkeydown="upperCaseF(this)"/>

Dans votre JavaScript:

function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

Avec la upperCaseF()fonction à chaque pression de touche vers le bas, la valeur de l'entrée va se transformer en sa forme majuscule.

J'ai également ajouté un délai de 1 ms pour que le bloc de code de fonction se déclenche après l'événement keydown.

Le problème avec la première réponse est que l'espace réservé sera également en majuscules. Dans le cas où vous souhaitez SEULEMENT l'entrée en majuscules, utilisez la solution suivante.

Afin de sélectionner uniquement l'élément d'entrée non vide, placez l'attribut requis sur l'élément:

<input type="text" id="name-input" placeholder="Enter symbol" required="required" />

Maintenant, pour le sélectionner, utilisez le :validpseudo-élément:

#name-input:valid { text-transform: uppercase; }

De cette façon, vous ne mettrez en majuscules que les caractères saisis.

essayer

<input type="text" class="normal" 
       style="text-transform:uppercase" 
       name="Name" size="20" maxlength="20"> 
 <img src="../images/tickmark.gif" border="0"/>

Au lieu de l'image, mettez une balise de style en entrée car vous écrivez sur l'entrée et non sur l'image

Définir le style suivant pour définir toute la zone de texte en majuscules

input {text-transform: uppercase;}

Le problème avec le style CSS est qu'il ne change pas les données, et si vous ne voulez pas avoir de fonction JS, essayez ...

<input onkeyup="this.value = this.value.toUpperCase()" />

seul, vous verrez le champ capitaliser sur keyup, il peut donc être souhaitable de le combiner avec les style='text-transform:uppercase'autres suggérés.

L'utilisation de CSS text-transform: uppercasene change pas l'entrée réelle mais change seulement son apparence. Si vous envoyez les données d'entrée à un serveur, elles seront toujours en minuscules ou quelle que soit la manière dont vous les avez entrées. Pour réellement transformer la valeur d'entrée, vous devez ajouter du code javascript comme ci-dessous:

document.querySelector("input").addEventListener("input", function(event) {
  event.target.value = event.target.value.toLocaleUpperCase()
})

<input>

Ici, j'utilise toLocaleUpperCase()pour convertirinput valeur en majuscules. Cela fonctionne bien jusqu'à ce que vous ayez besoin de modifier ce que vous avez entré, par exemple si vous avez entré ABCXYZ et que vous essayez maintenant de le changer en ABCLMNXYZ, il deviendra ABCLXYZMN car après chaque entrée, le curseur saute à la fin.

Pour surmonter ce saut du curseur, nous devons apporter les modifications suivantes à notre fonction:

document.querySelector("input").addEventListener("input", function(event) {
  var input = event.target;
  var start = input.selectionStart;
  var end = input.selectionEnd;
  input.value = input.value.toLocaleUpperCase();
  input.setSelectionRange(start, end);
})

<input>

Maintenant, tout fonctionne comme prévu, mais si vous avez un PC lent, vous pouvez voir le texte passer des minuscules aux majuscules au fur et à mesure que vous tapez. Si cela vous ennuie, c'est le moment d'utiliser CSS, appliquez input: {text-transform: uppercase;}au fichier CSS et tout ira bien.

Cela affichera à la fois l'entrée en majuscules et enverra les données d'entrée par courrier en majuscules.

HTML

<input type="text" id="someInput">

JavaScript

var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
    someInput.value = someInput.value.toUpperCase();
});

Comme personne ne l'a suggéré:

Si vous souhaitez utiliser la solution CSS avec des espaces réservés en minuscules, il vous suffit de styliser les espaces réservés séparément. Divisez les 2 styles d'espace réservé pour la compatibilité avec IE.

input {
    text-transform: uppercase;
}
input:-ms-input-placeholder {
    text-transform: none;
}
input::placeholder {
    text-transform: none;
}

The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />

Essayez la solution ci-dessous, cela prendra également soin lorsqu'un utilisateur n'entre que des espaces vides dans le champ de saisie au premier index.

document.getElementById('capitalizeInput').addEventListener("keyup",   () => {
  var inputValue = document.getElementById('capitalizeInput')['value']; 
  if (inputValue[0] === ' ') {
      inputValue = '';
    } else if (inputValue) {
      inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
    }
document.getElementById('capitalizeInput')['value'] = inputValue;
});

<input type="text" id="capitalizeInput" autocomplete="off" />

<script type="text/javascript">
    function upperCaseF(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}
</script>

<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">