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 railway, dovrebbe essere modificato in lettere maiuscole come se RAILWAY l'utente non dovesse premere il tasto BLOC MAIUSC.

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

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

Ma non sto ottenendo l'output desiderato usando questo attributo.

Hai messo l' styleattributo sul <img>tag, anziché il <input>.

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

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

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

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

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

MODIFICARE

Alcune persone si sono lamentate del fatto che il cursore salta alla fine quando si modifica il valore, quindi questa versione leggermente espansa dovrebbe risolverlo

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

Le risposte con lo text-transformation:uppercasestile non invieranno dati in maiuscolo al server al momento dell'invio, cosa ci si potrebbe aspettare. Puoi fare qualcosa del genere invece:

Per il tuo input HTML usa onkeydown:

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

Nel tuo JavaScript:

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

Con la upperCaseF()funzione su ogni tasto premuto, il valore dell'input diventerà maiuscolo.

Ho anche aggiunto un ritardo di 1 ms in modo che il blocco del codice funzione si attivi dopo che si è verificato l'evento keydown.

Il problema con la prima risposta è che anche il segnaposto sarà in maiuscolo. Nel caso in cui SOLO l'input sia in maiuscolo, utilizzare la seguente soluzione.

Per selezionare solo un elemento di input non vuoto, inserire l'attributo richiesto sull'elemento:

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

Ora, per selezionarlo, usa lo :validpseudo-elemento:

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

In questo modo verranno inseriti solo caratteri maiuscoli.

provare

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

Invece di inserire l'immagine tag di stile sull'input perché si sta scrivendo sull'input non sull'immagine

Imposta lo stile seguente per impostare tutte le caselle di 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 ...

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

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

L'uso dei CSS text-transform: uppercasenon modifica l'input effettivo ma cambia solo il suo aspetto. Se si inviano i dati di input a un server, verranno comunque minuscoli o comunque immessi. Per trasformare effettivamente il valore di input è necessario aggiungere il codice javascript come di seguito:

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

<input>

Qui sto usando toLocaleUpperCase()per convertire il inputvalore in maiuscolo. Funziona bene fino a quando non è necessario modificare ciò che è stato inserito, ad esempio se è stato inserito ABCXYZ e ora si tenta di modificarlo in ABCLMNXYZ, diventerà ABCLXYZMN perché dopo ogni input il cursore passa alla fine.

Per superare questo salto del cursore, dobbiamo apportare le seguenti modifiche alla nostra funzione:

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>

Ora tutto funziona come previsto, ma se hai un PC lento potresti vedere il testo saltare da lettere minuscole a lettere maiuscole durante la digitazione. Se questo ti dà fastidio, questo è il momento di usare i CSS, applicare input: {text-transform: uppercase;}al file CSS e tutto andrà bene.

Ciò mostrerà entrambi l'input in maiuscolo e invierà i dati di input tramite post in maiuscolo.

HTML

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

JavaScript

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

Come nessuno lo ha suggerito:

Se si desidera utilizzare la soluzione CSS con segnaposto minuscoli, è sufficiente modellare i segnaposto separatamente. Dividi i 2 stili di segnaposto per la compatibilità con 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" />

Prova la soluzione di seguito, ciò si occuperà anche quando un utente inserisce solo uno spazio vuoto nel campo di input al primo indice.

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)">