...
PDA

Accept only letters in a field

whammy
11-24-2002, 01:38 PM
Very simple, but useful - I just came up with this in answer to a post:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Letters ONLY</title>
<script type="text/javascript">
<!--
function alpha(e) {
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8);
}
// -->
</script>
</head>
<body>
<div>
<form id="example" action="javascript://">
<input type="text" onkeypress="return alpha(event)" />
</form>
</div>
</body>
</html>


Post any improvements if you have 'em. :)
Borgtex
11-24-2002, 04:20 PM
Originally posted by whammy
Post any improvements if you have 'em. :)

Ok this improved version works with character patterns already defined or defined by user. That's useful for different languages support, mail, urls, etc... :)




<head>
<script type="text/javascript">
<!--
var letters=' ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZabcçdefghijklmnñopqrstuvwxyzàáÀÁéèÈÉíìÍÌïÏóòÓÒúùÚÙüÜ'
var numbers='1234567890'
var signs=',.:;@-\''
var mathsigns='+-=()*/'
var custom='<>#$%&?¿'

function alpha(e,allow) {
var k;
k=document.all?parseInt(e.keyCode): parseInt(e.which);
return (allow.indexOf(String.fromCharCode(k))!=-1);
}

// -->
</script>
</head>
<body>
<div>
<form id="example" action="java script://">
<input type="text" onkeypress="return alpha(event,numbers)" />
<input type="text" onkeypress="return alpha(event,letters)" />
<input type="text" onkeypress="return alpha(event,numbers+letters+signs)" />


</form>
</div>
</body>
</html>
whammy
11-26-2002, 12:21 AM
I like it. Still elegant and simple with minimal changes, and modifiable by what characters the programmer wants to allow... your improvements have been assimilated. :)
skeatt
12-06-2002, 02:32 PM
:(
Whats this doing here...

return (allow.indexOf(String.fromCharCode(k))!=-1);


and whats this mean...

<form id="example" action="java script:// ">
mordred
12-06-2002, 03:38 PM
allow

is a parameter passed to the function alpha. It can consist of concatenated strings in this example (look at the eventhandlers in the input tags). The effect should be that you can restrict the letters that may be typed into the fields by passing the appropriate variables, which in return consist of those characters allowed to be typed.
whammy
12-07-2002, 11:17 PM
Sticking to the original script, here's an improvement that defeats copying and pasting anything but letters in.


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>isAlphaKey</title>
<script type="text/javascript">
<!--
function isAlphaKey(e) {
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8);
}
function extractAlpha(str) {
return str.replace(/[^a-z]/gi,"");
}
// -->
</script>
</head>
<body>
<div>
<form id="example" action="javascript://">
<input type="text" onkeypress="return isAlphaKey(event)" onblur="this.value=extractAlpha(this.value)" /> Letters Only<br />
</form>
</div>
</body>
</html>

P.S. The other idea posted works fine, except I can't get regular expressions to accept any of the "non-english" characters he typed in (therefore allowing anything to be pasted in the field), and the backspace key was left out of it as well... besides you can update the keycodes to match numbers and symbols.

:)
skeatt
12-08-2002, 09:23 AM
Originally posted by whammy
(therefore allowing anything to be pasted in the field),
:)
The other posted improvement by Borgtex.....I did notice that when you clicked on a field it brought up some browser history of pass entries, clicking on one of these that had illegal characters for that field didn't seem to matter (ie numbers), it filled the field with numbers when it shouldn't have,

I'll have to look at your improvement closely and see if it can be included in all fields.
olaster
02-28-2008, 09:30 AM
The solutions here allow using certain letters but the enter key doesn't submit the form. Anyone knows how to allow also the enter key?
Kor
02-28-2008, 09:44 AM
Here's a short variant, RegExp based only:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function valid(f) {
!/^[A-z]*$/.test(f.value)?f.value = f.value.replace(/[^A-z]/g,''):null;
}
</script>
</head>
<body><br>
<form id="myform" action="">
<input name="mytext" type="text" onkeyup="valid(this)" onblur="valid(this)">
</form>
</body>
</html>

olaster, this code will avoid the Enter key problem as well.
whammy, this code will avoid the backspace problem.
olaster
02-28-2008, 09:57 AM
Thanks a lot Kor
Kor
02-28-2008, 10:13 AM
As for the special "non-english" letters, the code is to be adapted upon needs:

<script type="text/JavaScript">
function valid(f) {
!/^[A-zÇÑQÀÁÈÉÍÌÏÓÒÚÙÜ]*$/i.test(f.value)?f.value = f.value.replace(/[^A-zÇÑQÀÁÈÉÍÌÏÓÒÚÙÜ]/ig,''):null;
}
</script>

And this, whammy, will solve your second problem, I guess
YaymeQ
03-16-2008, 07:05 PM
so what if people disable javascript and then type whatever they want?
Kor
03-16-2008, 08:04 PM
so what if people disable javascript and then type whatever they want?
a server side protection validation is to be used as well, and that will be enough.
shibu
03-31-2008, 10:27 AM
<head>
<script type="text/javascript">
<!--
var letters=' ABCÇDEFGHIJKLMNÑOPQRSTUVWXYZabcçdefghijklmnñopqrstuvwxyzàáÀÁéèÈÉíìÍÌïÏóòÓÒúùÚÙüÜ'
var numbers='1234567890'
var signs=',.:;@-\''
var mathsigns='+-=()*/'
var custom='<>#$%&?¿'

function alpha(e,allow) {
var k;
k=document.all?parseInt(e.keyCode): parseInt(e.which);
return (allow.indexOf(String.fromCharCode(k))!=-1);
}

// -->
</script>
</head>
<body>
<div>
<form id="example" action="java script://">
<input type="text" onkeypress="return alpha(event,numbers)" />
<input type="text" onkeypress="return alpha(event,letters)" />
<input type="text" onkeypress="return alpha(event,numbers+letters+signs)" />


</form>
</div>
</body>
</html>

Thanks and regards
http://www.outsource-website-development.com/ http://www.outsource-website-design.com/
discobear
04-06-2008, 09:43 PM
this is really cool but the original version is much more practical as the revised version prevents the user from deleting characters.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum