Cómo hacer que todo esté en minúscula automáticamente en Javascript, ya que lo escriben en

Question

¿Cómo hago todos los caracteres de un cuadro de texto en minúscula cuando el usuario los escribe en un campo de texto en Javascript?

<input type="text" name="thishastobelowercase"> 

Gracias por cualquier ayuda.

Answer 1

$('input').keyup(function(){ 
    this.value = this.value.toLowerCase(); 
}); 

Answer 2

me acaba de hacer CSS hacer esto para usted en lugar de monerías con javascript:

<input type="text" name="tobelowercase" style="text-transform: lowercase;"> 

Answer 3

¿Sólo tienen que pantalla en minúsculas, o qué tiene que ser minúsculas ? Si desea mostrar en minúsculas, puede usar CSS text-transform: lowercase.

Debe imponer esta restricción en el lado del servidor de todos modos, porque el usuario puede deshabilitar cualquier código JS que ingrese para exigir que permanezca en minúscula.

Mi sugerencia: utilice el CSS text-transform para que siempre se muestre en minúscula, y luego haga un toLower o la variante de su idioma en el lado del servidor antes de usarlo.

Answer 4

dos maneras:

Uso CSS:

.lower { 
    text-transform: lowercase; 
} 

<input type="text" name="thishastobelowercase" class="lower"> 

Usando JS:

<input type="text" name="thishastobelowercase" onkeypress="this.value = this.value.toLowerCase();"> 

Answer 5

Esta es una máscara del tipo de validación que desea

(function($) { 
    $.fn.maskSimpleName = function() { 
     $(this).css('text-transform', 'lowercase').bind('blur change', function(){ 
      this.value = this.value.toLowerCase(); 
     }); 
    } 
})(jQuery); 

La ventaja de usarlo es que el cursor no irá al final de la entrada de cada carácter ingresado, como lo haría si se usa la tecla a o la solución keupress.

$('#myinput').maskSimpleName(); 

Esta es una manera de usarlo.

Obs: esta máscara envía los datos en minúsculas al servidor también.

Answer 6

Bootstrap TExto:

<p class="text-lowercase">Lowercased text.</p> 
<p class="text-uppercase">Uppercased text.</p> 
<p class="text-capitalize">CapiTaliZed text.</p>