Como você define automaticamente a caixa de texto para Maiúsculas?

Estou usando o atributo de estilo a seguir para definir a entrada do usuário para maiúscula, para que, quando o usuário comece a digitar na caixa de texto, por exemplo railway, ela seja alterada para letras maiúsculas, RAILWAY sem que o usuário precise pressionar o botão Caps-lock.

Este é o código que estou usando para a entrada:

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

Mas não estou obtendo a saída desejada usando esse atributo.

Você colocou o styleatributo na <img>tag, em vez de <input>.

Também não é uma boa ideia ter espaços entre o nome do atributo e o valor ...

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

Observe que essa transformação é puramente visual e não altera o texto enviado no POST.

Eu acho que a solução mais robusta que garantirá que ela seja postada em maiúscula é usar o método oninput inline como:

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

EDITAR

Algumas pessoas se queixam de que o cursor pula para o final ao editar o valor; portanto, esta versão levemente expandida deve resolver esse problema.

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

As respostas com o text-transformation:uppercase estilo não enviarão dados em maiúsculas para o servidor no envio - o que você pode esperar. Você pode fazer algo assim:

Para seu HTML de entrada, use onkeydown:

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

No seu JavaScript:

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

Com upperCaseF() função em cada tecla pressionada, o valor da entrada se transformará em sua forma maiúscula.

Também adicionei um atraso de 1 ms para que o bloco do código de função seja acionado após o evento de pressionamento de tecla.

O problema com a primeira resposta é que o espaço reservado também estará em maiúsculas. Caso você queira que SOMENTE a entrada seja maiúscula, use a seguinte solução.

Para selecionar apenas o elemento de entrada não vazio, coloque o atributo necessário no elemento:

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

Agora, para selecioná-lo, use o :validpseudoelemento:

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

Dessa forma, você colocará apenas caracteres em maiúsculas.

experimentar

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

Em vez de imagem, coloque a etiqueta de estilo na entrada, porque você está escrevendo na entrada e não na imagem

Defina o estilo a seguir para definir todas as caixas de texto em maiúsculas

input {text-transform: uppercase;}

O problema com o CSS Styling é que ele não está alterando os dados e, se você não deseja ter uma função JS, tente ...

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

por si só, você verá o campo em maiúsculas e minúsculas, por isso pode ser desejável combinar isso com os style='text-transform:uppercase'outros sugeridos.

O uso de CSS text-transform: uppercasenão altera a entrada real, mas apenas sua aparência. Se você enviar os dados de entrada para um servidor, eles ainda serão minúsculos ou, no entanto, você os inseriu. Para realmente transformar o valor de entrada, você precisa adicionar o código javascript como abaixo:

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

<input>

Aqui estou usando toLocaleUpperCase()para converterinput valor em maiúsculas. Funciona bem até que você precise editar o que inseriu, por exemplo, se você inseriu ABCXYZ e agora tenta alterá-lo para ABCLMNXYZ, ele se tornará ABCLXYZMN porque, após cada entrada, o cursor salta para o final.

Para superar esse salto do cursor, precisamos fazer as seguintes alterações em nossa função:

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>

Agora tudo funciona como esperado, mas se você tiver um PC lento, poderá ver o texto saltando de letras minúsculas para maiúsculas enquanto digita. Se isso o incomoda, é o momento de usar CSS, aplicar input: {text-transform: uppercase;}ao arquivo CSS e tudo ficará bem.

Isso mostrará a entrada em maiúsculas e enviará os dados de entrada por postagem em maiúsculas.

HTML

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

Javascript

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

Como ninguém sugeriu:

Se você deseja usar a solução CSS com espaços reservados em minúsculas, basta estilizar os espaços reservados separadamente. Divida os 2 estilos de espaço reservado para compatibilidade com o 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" />

Experimente a solução abaixo. Isso também será tomado quando um usuário inserir apenas espaço em branco no campo de entrada no primeiro índice.

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