Come si imposta automaticamente la casella di testo su Maiuscolo?

Sto usando il seguente attributo di stile per impostare l’input dell’utente in maiuscolo in modo che quando l’utente inizia a digitare nella casella di testo, ad esempio la railway , quindi dovrebbe essere modificato in lettere maiuscole come RAILWAY senza che l’utente debba premere il tasto Caps-lock .

Questo è il codice che sto usando per l’input:

   

Ma non sto ottenendo l’output desiderato utilizzando questo attributo.

Hai messo l’attributo style sul tag , invece che su .

Inoltre, non è una buona idea avere gli spazi tra il nome dell’attributo e il valore …

   

Si noti che questa trasformazione è puramente visiva e non modifica il testo inviato nel POST.

Le soluzioni sopra riportate vengono interrotte mentre si pubblicano i dati. Invece puoi fare qualcosa del genere;

Per il tuo input, l’HTML usa onkeydown;

  

Nel tuo javascript;

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

Con la funzione upperCaseF() su ogni tasto premere verso il basso, il valore dell’ingresso si trasformsrà nella sua forma maiuscola.

Inoltre ho messo un ritardo di 1ms in modo che il blocco di codice funzione si innesca dopo che si è verificato l’evento keydown.

Penso che la soluzione più solida che assicurerà che sia pubblicata in maiuscolo è quella di utilizzare il metodo oninput inline come:

  

Il problema con la prima risposta è che anche il segnaposto sarà maiuscolo. Se si desidera che SOLO l’input sia maiuscolo, utilizzare la seguente soluzione.

Per selezionare solo elementi di input non vuoti, inserire l’attributo richiesto sull’elemento:

  

Ora, per selezionarlo, usa lo pseudo-elemento: :valid :

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

In questo modo verranno scritti solo caratteri maiuscoli.

provare

   

Invece di inserire l’immagine inserire il tag di stile sull’input perché si scrive sull’input non sull’immagine

Imposta lo stile seguente per impostare tutto il testo in maiuscolo

 input {text-transform: uppercase;} 

Il problema con CSS Styling è che non sta cambiando i dati, e se non vuoi avere una funzione JS, prova …

da solo vedrai il campo capitalizzare su keyup, quindi potrebbe essere opportuno combinarlo con lo style='text-transform:uppercase' suggerito da altri.

Questo mostrerà l’input in maiuscolo e invierà i dati di input tramite post in maiuscolo.

HTML

  

JavaScript

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