¿Cómo configura automáticamente el cuadro de texto en mayúsculas?

Estoy usando el siguiente atributo de estilo para configurar la entrada del usuario en mayúsculas para que cuando el usuario comience a escribir en el cuadro de texto, por ejemplo railwayentonces debe cambiarse a mayúsculas como RAILWAY sin que el usuario tenga que presionar el botón Bloq Mayús.

Este es el código que estoy usando para la entrada:

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

Pero no obtengo el resultado deseado al usar este atributo.

has puesto el style atributo en el <img> etiqueta, en lugar de la <input>.

Tampoco es una buena idea dejar espacios entre el nombre del atributo y el valor…

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

Tenga en cuenta que esta transformación es puramente visual, y no cambia el texto que se envía en POST.

NOTA: Si desea configurar el valor de entrada real en mayúsculas y asegúrese de que el texto enviado por el formulario esté en mayúsculas, puede usar el siguiente código:

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

Creo que la solución más robusta que asegurará que se publique en mayúsculas es usar el método oninput en línea como:

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

EDITAR

Algunas personas se han quejado de que el cursor salta al final al editar el valor, por lo que esta versión ligeramente ampliada debería resolver eso.

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

Las respuestas con el text-transformation:uppercase el estilo no enviará datos en mayúsculas al servidor al enviar, lo que podría esperar. Puedes hacer algo como esto en su lugar:

Para su entrada HTML use onkeydown:

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

En tu JavaScript:

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

Con upperCaseF() función en cada pulsación de tecla, el valor de la entrada se convertirá en su forma mayúscula.

También agregué un retraso de 1 ms para que el bloque de código de función se active después de que ocurra el evento de pulsación de tecla.

ACTUALIZAR

Por recomendación de Dinei, puede usar el evento oninput en lugar de onkeydown y deshacerse de setTimeout.

Para su entrada HTML use oninput:

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

El problema con la primera respuesta es que el marcador de posición también estará en mayúsculas. En caso de que desee que SOLO la entrada esté en mayúsculas, use la siguiente solución.

Para seleccionar solo un elemento de entrada que no esté vacío, coloque el atributo requerido en el elemento:

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

Ahora, para seleccionarlo, utilice el :valid pseudo-elemento:

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

De esta manera, solo escribirá en mayúsculas los caracteres ingresados.

probar

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

En lugar de la imagen, coloque la etiqueta de estilo en la entrada porque está escribiendo en la entrada, no en la imagen

Establezca el siguiente estilo para configurar todos los cuadros de texto en mayúsculas

input {text-transform: uppercase;}

Usando CSS text-transform: uppercase no cambia la entrada real, solo cambia su aspecto. Si envía los datos de entrada a un servidor, seguirán en minúsculas o como los haya ingresado. Para transformar realmente el valor de entrada, debe agregar el código javascript como se muestra a continuación:

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

<input>

Aquí estoy usando toLocaleUpperCase() para convertir input valor a mayúsculas. Funciona bien hasta que necesite editar lo que ingresó, por ejemplo, si ingresó ABCXYZ y ahora intenta cambiarlo a ABCLMNXYZ, se convertirá en ABCLXYZMN porque después de cada entrada el cursor salta al final.

Para superar este salto del cursor, tenemos que hacer los siguientes cambios en nuestra función:

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>

Ahora todo funciona como se esperaba, pero si tiene una PC lenta, es posible que vea que el texto salta de minúsculas a mayúsculas a medida que escribe. Si esto te molesta, este es el momento de usar CSS, aplica input: {text-transform: uppercase;} al archivo CSS y todo estará bien.