How to force input for alpha letters only?

Question

using jQuery here, however unable to prevent the input of numbers into the input field

http://codepen.io/leongaban/pen/owbjg

Enter

<input type="text" name="field" maxlength="8" title="Only Letters" value="Type Letters Only" onkeydown="return alphaOnly(event);" onblur="if (this.value == '') {this.value = 'Type Letters Only';}" onfocus="if (this.value == 'Type Letters Only') {this.value = '';}"/> 

JQuery

 function alphaOnly(event) { alert(event); var key; if (window.event) { key = window.event.key; } else if (e) { key = e.which; } //var key = window.event.key || event.key; alert(key.value); return ((key >= 65 && key <= 90) || (key >= 95 && key <= 122)); } 

I have seen many examples here, how to limit only to numbers, and I use the correct key codes for az and AZ. Do you see what I'm doing wrong?

Answer 1

The event.key property gave me an undefined value. Instead, I used event.keyCode :

 function alphaOnly(event) { var key = event.keyCode; return ((key >= 65 && key <= 90) || key == 8); }; 

Note that the value is 8 for the backspace key.

Answer 2

Instead of relying on key codes, which can be rather cumbersome, you can use regular expressions instead. By changing the template, we can easily limit the input to suit our needs. Note that this works with the keypress event and will allow the use of backspace (as in the accepted answer). This does not prevent users from inserting "illegal" characters.

 function testInput(event) { var value = String.fromCharCode(event.which); var pattern = new RegExp(/[a-zåäö ]/i); return pattern.test(value); } $('#my-field').bind('keypress', testInput); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> Test input: <input id="my-field" type="text"> </label> 

Answer 3

Short ONELINER :

 <input onkeypress="return /[az]/i.test(event.key)" > 

For all unicode letters, try this regular expression : /\p{L}/u ( but ... this ) - and here's an example :)

Answer 4

In new browsers you can use:

 <input type="text" name="country_code" pattern="[A-Za-z]" title="Three letter country code"> 

You can use regular expressions to limit input fields.

Answer 5

Only one single-line HTML:

  <input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'> 

Answer 6

 <input type="text" name="field" maxlength="8" onkeypress="return onlyAlphabets(event,this);" /> function onlyAlphabets(e, t) { try { if (window.event) { var charCode = window.event.keyCode; } else if (e) { var charCode = e.which; } else { return true; } if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123)) return true; else return false; } catch (err) { alert(err.Description); } } 

Answer 7

Many other solutions using keystrokes will not work on mobile devices, you need to use input .

HTML

 <input type="text" id="name" data-value="" autocomplete="off" spellcheck="true" placeholder="Type your name" autofocus /> 

JQuery

 $('#name').on('input', function() { var cursor_pos = $(this).getCursorPosition() if(!(/^[a-zA-Z ']*$/.test($(this).val())) ) { $(this).val($(this).attr('data-value')) $(this).setCursorPosition(cursor_pos - 1) return } $(this).attr('data-value', $(this).val()) }) $.fn.getCursorPosition = function() { if(this.length == 0) return -1 return $(this).getSelectionStart() } $.fn.setCursorPosition = function(position) { if(this.lengh == 0) return this return $(this).setSelection(position, position) } $.fn.getSelectionStart = function(){ if(this.lengh == 0) return -1 input = this[0] var pos = input.value.length if (input.createTextRange) { var r = document.selection.createRange().duplicate() r.moveEnd('character', input.value.length) if (r.text == '') pos = input.value.length pos = input.value.lastIndexOf(r.text) } else if(typeof(input.selectionStart)!="undefined") pos = input.selectionStart return pos } $.fn.setSelection = function(selectionStart, selectionEnd) { if(this.lengh == 0) return this input = this[0] if(input.createTextRange) { var range = input.createTextRange() range.collapse(true) range.moveEnd('character', selectionEnd) range.moveStart('character', selectionStart) range.select() } else if (input.setSelectionRange) { input.focus() input.setSelectionRange(selectionStart, selectionEnd) } return this } 

Answer 8

 <input type="text" name="name" id="event" onkeydown="return alphaOnly(event);" required /> function alphaOnly(event) { var key = event.keyCode;`enter code here` return ((key >= 65 && key <= 90) || key == 8); };