Zezwalaj na pole tekstowe tylko dla liter używających jQuery?

Question

Chcę, aby pole tekstowe zezwalało tylko na litery (a-z) za pomocą jQuery. Dowolne przykłady?

Answer 1

<input name="lorem" onkeyup="this.value=this.value.replace(/[^a-z]/g,'');"> 

i może być to samo onblur zła użytkownika, który chcesz wkleić zamiast pisania;)

[+] Całkiem kod jQuery:

<input name="lorem" class="alphaonly"> 
<script type="text/javascript"> 
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this); 
    node.val(node.val().replace(/[^a-z]/g,'')); } 
); 
</script> 

Answer 2

Aby zezwolić tylko dolne przypadku alfabetów , zadzwoń pod numer preventDefault w obiekcie zdarzenia, jeśli kod klucza nie znajduje się w zakresie "a" .. "z". Sprawdź także pomiędzy 65..90 lub "A" .. "Z", jeśli powinna być dozwolona duża.

Lub alternatywnie użyj jednego z wielu input mask plugins tam.

Zobacz example.

​$(<selector>).keypress(function(e) { 
    if(e.which < 97 /* a */ || e.which > 122 /* z */) { 
     e.preventDefault(); 
    } 
});​​​​​ 

Answer 3

Akceptowane odpowiedź

Przyjęty Odpowiedź może być krótka, ale jest poważnie wadliwe (see this fiddle):

• Kursor przesunie się do końca, bez względu naciśnięciu klawisza.
• Brak liter są na chwilę wyświetlane, a następnie znikają.
• Jest to problematyczne w Chrome na Androida (zobacz mój komentarz).

Lepszym sposobem

Poniższa tworzy tablicę kodów klawiszy (biała lista). Jeśli naciśnięty klawisz nie jest w tablicy, a następnie wejście jest ignorowane (see this fiddle):

$(".alpha-only").on("keydown", function(event){ 
    // Allow controls such as backspace, tab etc. 
    var arr = [8,9,16,17,20,35,36,37,38,39,40,45,46]; 

    // Allow letters 
    for(var i = 65; i <= 90; i++){ 
    arr.push(i); 
    } 

    // Prevent default if not in array 
    if(jQuery.inArray(event.which, arr) === -1){ 
    event.preventDefault(); 
    } 
}); 

pamiętać, że ta pozwala wielkich liter i małych liter.

Dołączyłem kody klawiszy, takie jak Backspace, Delete i klawisze strzałek. Możesz stworzyć własną tablicę białych list od this list of key codes, aby dopasować ją do swoich potrzeb.

Zmienić na pastę tylko

Oczywiście, użytkownik może nadal wklej nie-litery (takich jak poprzez CTRL + V lub prawym przyciskiem myszy), więc wciąż musimy monitorować wszystkie zmiany w .on("input"... ale replace()tylko w razie konieczności:

$(".alpha-only").on("input", function(){ 
    var regexp = /[^a-zA-Z]/g; 
    if($(this).val().match(regexp)){ 
    $(this).val($(this).val().replace(regexp,'')); 
    } 
}); 

oznacza to wciąż mamy niepożądanego efektu skoki kursora do końca, ale tylko wtedy, gdy użytkownik wkleja non-list s.

Unikanie Autokorekta

niektórych klawiatur dotykowy zrobi wszystko, co w ich mocy, aby Autokorekta użytkownikowi gdzie uzna to za konieczne.Co zaskakujące, może to nawet obejmować wejścia, w których są wyłączone autocomplete i autocorrect, a nawet spellcheck.

Aby obejść ten problem, zaleca się używanie type="url", ponieważ adresy URL mogą przyjmować wielkie i małe litery, ale nie zostaną automatycznie skorygowane. Następnie, aby obejść przeglądarkę próbującą zweryfikować adres URL, musisz użyć novalidate w swoim tagu form.

Answer 4

Dzięki pierwszej odpowiedzi .. dokonał tego ..

<input name="lorem" class="alpha-only"> 

<script type="text/javascript"> 
    $(function() 
    { 
     $('.alpha-only').bind('keyup input',function() 
     {  
      if (this.value.match(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g)) 
      { 
       this.value = this.value.replace(/[^a-zA-Z áéíóúÁÉÍÓÚüÜ]/g, ''); 
      } 
     }); 
    }); 
</script> 

ten ma kilka ulepszeń, takich jak litery z akcentami oraz zmianę „rozmycia” za „wejście” koryguje non-litery wyświetlane na chwilę, również wtedy, gdy wybrać tekst z myszą i przeciągając jest usuwana ..

Answer 5

wykazano poniżej, aby umożliwić tylko litery [AZ] przy użyciu jQuery:

$(function() { 
 
    $('#txtFirstName').keydown(function(e) { 
 
     if (e.shiftKey || e.ctrlKey || e.altKey) { 
 
     e.preventDefault(); 
 
     } else { 
 
     var key = e.keyCode; 
 
     if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) { 
 
      e.preventDefault(); 
 
     } 
 
     } 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<input id="txtFirstName" value="">

Answer 6

funkcja jQuery pozwalają jedynie małych i wielkich liter:

Pole tekstowe:

<input id="a" type="text" /> 

JQuery funkcji:

$('#a').keydown(function (e) { 
    if (e.ctrlKey || e.altKey) { 
      e.preventDefault(); 
    } else { 
      var key = e.keyCode; 
      if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) { 
       e.preventDefault(); 
      } 
    } 
}); 

Answer 7

rozwiązanie opisane przez @dev-null-dweller pracuje absolutnie.

Jednak od jQuery 3.0, .bind() metoda została uznana za przestarzałą. Zastąpiła go metoda .on() dołączania modułów obsługi zdarzeń do dokumentu od jQuery 1.7, więc jej użycie zostało już odradzone.

lista Sprawdź przestarzałe metody dla jQuery 3.0 tutaj: http://api.jquery.com/category/deprecated/deprecated-3.0/

Więc rozwiązaniem jest użycie .on() metodę zamiast .bind().

Jeśli trzeba powiązać istniejące elementy wtedy kod będzie:

$('.alphaonly').on('keyup blur', function(){ 
    var node = $(this); 
    node.val(node.val().replace(/[^a-z]/g,'')); 
}); 

Jeśli trzeba powiązać z elementami dynamicznymi kod będzie:

$(document).on('keyup blur', '.alphaonly', function(){ 
    var node = $(this); 
    node.val(node.val().replace(/[^a-z]/g,'')); 
}); 

Trzeba powiązać zdarzenie do dokumentu lub innego elementu, który już istnieje od załadowania dokumentu.

Mam nadzieję, że jest to pomocne w nowej wersji jQuery.

Answer 8

// allow only Alphabets A-Z a-z _ and space 
$('.alphaonly').bind('keyup blur',function(){ 
    var node = $(this); 
    node.val(node.val().replace(/[^A-Za-z_\s]/,'')); } // (/[^a-z]/g,'' 
); 
// allow only Number 0 to 9 
$('.numberonly').bind('keyup blur',function(){ 
    var node = $(this); 
    node.val(node.val().replace(/[^0-9]/,'')); } // (/[^a-z]/g,'' 
); 

Answer 9

$("#test").keypress(function(event){ 
 
     var inputValue = event.charCode; 
 
     //alert(inputValue); 
 
     if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32) || (inputValue==0))){ 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 
    $("#test1").keypress(function(event){ 
 
     var inputValue = event.charCode; 
 
     //alert(inputValue); 
 
     if(!((inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){ 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 

 
    $("#test3").keypress(function(event){ 
 
     var inputValue = event.charCode; 
 
     //alert(inputValue); 
 
     if(!((inputValue > 64 && inputValue < 91) || (inputValue > 96 && inputValue < 123)||(inputValue==32)||(inputValue > 47 && inputValue < 58) ||(inputValue==32) || (inputValue==0))){ 
 
      event.preventDefault(); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
For letters:<input type="text" id="test"> <br> 
 
<br> 
 
For Numbers: <input type="text" id="test1"> 
 
<br> 
 
<br> 
 
For Alphanumeric: <input type="text" id="test3">

Answer 10

Obsługuje Backspace:

new RegExp("^[a-zA-Z \b]*$"); 

Ta opcja nie sprawdzi Mobile.Więc można użyć jQuery Mask Plugin i użyć następującego kodu:

jQuery('.alpha-field, input[name=fname]').mask('Z',{translation: {'Z': {pattern: /[a-zA-Z ]/, recursive: true}}});