Jak zrobić wszystko małymi literami automatycznie w JavaScript, ponieważ wpisują one w

Question

Jak utworzyć wszystkie znaki w polu tekstowym małymi literami, gdy użytkownik wpisze je w polu tekstowym w Javascript?

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

Dzięki za pomoc.

Answer 1

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

Answer 2

Chciałbym po prostu zrobić CSS zrobić to dla ciebie zamiast monkeying wokół z javascript:

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

Answer 3

Czy ma tylko wyświetlaczu w małych liter, czy też trzeba być małymi literami ? Jeśli chcesz wyświetlić małe litery, możesz użyć CSS text-transform: lowercase.

Mimo to należy wyegzekwować to ograniczenie po stronie serwera, ponieważ użytkownik może wyłączyć dowolny kod JS, który wprowadził, aby wymusić, że pozostanie mały.

Moja sugestia: użyj CSS , aby zawsze wyświetlał się małymi literami, a następnie wykonaj toLower lub jego wariant językowy na serwerze przed użyciem.

Answer 4

dwa sposoby:

Korzystanie CSS:

.lower { 
    text-transform: lowercase; 
} 

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

Korzystanie JS:

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

Answer 5

Jest to maska ​​dla typu walidacji, który chcesz

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

Zaletą korzystania z niego jest to, że kursor nie przejdzie na koniec wprowadzania każdego wprowadzonego znaku, tak jak w przypadku użycia klucza lub rozwiązania z przyciskami.

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

Jest to sposób korzystania z niego.

Obs: Ta maska ​​wysyła dane małymi literami również do serwera.

Answer 6

Bootstrap Tekst transform:

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