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

Estoy usando el siguiente atributo de estilo para establecer la entrada del usuario en mayúsculas para que cuando el usuario comience a escribir en el cuadro de texto, por ejemplo railway, se deba alterar a mayúsculas como si RAILWAY el usuario tuviera 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="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>

Pero no obtengo el resultado deseado al usar este atributo.

Has puesto el styleatributo en la <img>etiqueta, en lugar de <input>.

Tampoco es una buena idea tener los 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.

Creo que la solución más sólida que asegurará que se publique en mayúsculas es usar el método de entrada 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 expandida 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:uppercaseestilo no enviarán datos en mayúsculas al servidor al enviar, lo que puede esperar. En su lugar, puede hacer algo como esto:

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 la upperCaseF()función en cada tecla presionada, el valor de la entrada se convertirá en 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 ocurriera el evento keydown.

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

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

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

Ahora, para seleccionarlo, use el :validpseudo-elemento:

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

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

tratar

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

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

Establecer el siguiente estilo para establecer todos los cuadros de texto en mayúsculas

input {text-transform: uppercase;}

El problema con CSS Styling es que no está cambiando los datos, y si no desea tener una función JS, intente ...

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

por sí solo, verá que el campo se capitaliza en el keyup, por lo que puede ser conveniente combinar esto con los style='text-transform:uppercase'otros que han sugerido.

El uso de CSS text-transform: uppercaseno cambia la entrada real, sino que solo cambia su aspecto. Si envía los datos de entrada a un servidor, seguirá en minúsculas o como lo haya ingresado. Para transformar realmente el valor de entrada, debe agregar el código de JavaScript de la siguiente manera:

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

<input>

Aquí estoy usando toLocaleUpperCase()para convertir el inputvalor 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, puede ver que el texto salta de minúsculas a mayúsculas mientras escribe. Si esto te molesta, este es el momento de usar CSS, aplicar input: {text-transform: uppercase;}al archivo CSS y todo estará bien.

Esto mostrará la entrada en mayúscula y enviará los datos de entrada a través de la publicación en mayúscula.

HTML

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

JavaScript

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

Como nadie lo sugirió:

Si desea utilizar la solución CSS con marcadores de posición en minúsculas, solo tiene que diseñar los marcadores de posición por separado. Divida los 2 estilos de marcador de posición para la compatibilidad 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" />

Pruebe la solución a continuación. Esto también tendrá cuidado cuando un usuario ingrese solo un espacio en blanco en el campo de entrada en el primer í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)">