using jQuery here, however unable to prevent numbers from being typed into the input field
http://codepen.io/leongaban/pen/owbjg
Input
<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've seen plenty of examples here on how to restrict to only Numbers, and I'm using the correct key codes for a-z and A-Z. Do you see what I'm doing wrong?
This question is related to
javascript
jquery
input
input-field
Rather than relying on key codes, which can be quite cumbersome, you can instead use regular expressions. By changing the pattern we can easily restrict the input to fit our needs. Note that this works with the keypress
event and will allow the use of backspace (as in the accepted answer). It will not prevent users from pasting 'illegal' chars.
function testInput(event) {_x000D_
var value = String.fromCharCode(event.which);_x000D_
var pattern = new RegExp(/[a-zåäö ]/i);_x000D_
return pattern.test(value);_x000D_
}_x000D_
_x000D_
$('#my-field').bind('keypress', testInput);
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<label>_x000D_
Test input:_x000D_
<input id="my-field" type="text">_x000D_
</label>
_x000D_
<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);
}
}
On newer 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 restrict the input fields.
<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);
};
A lot of the other solutions that use keypress will not work on mobile, 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
}
If your form is PHP based, it would work this way within your " <?php $data = array(" code:
'onkeypress' => 'return /[a-z 0-9]/i.test(event.key)',
Short ONELINER:
<input onkeypress="return /[a-z]/i.test(event.key)" >
_x000D_
For all unicode letters try this regexp: /\p{L}/u
(but ... this) - and here is working example :)
Nice one-liner HTML only:
<input type="text" id='nameInput' onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))'>
Source: Stackoverflow.com