CURRENT PROJECTS
loading
CATEGORIES AND POSTS
loading
overset
DEVELOPMENT LOG FOR JIM PALMER
Simple JavaScript Form Field onKeyDown Regular Expression Wrapper
Posted 12/01/2006 in javascript


UPDATED

This is the final version I've been using in the live environment - streamlined and simple for use in windows, mac - IE, FireFox, Safari. 
/* onKeyPress validation function */
function validVal(event, keyRE) {
	if (	( typeof(event.keyCode) != 'undefined' && event.keyCode > 0 && String.fromCharCode(event.keyCode).search(keyRE) != (-1) ) || 
		( typeof(event.charCode) != 'undefined' && event.charCode > 0 && String.fromCharCode(event.charCode).search(keyRE) != (-1) ) ||
		( typeof(event.charCode) != 'undefined' && event.charCode != event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13|45|46|35|36|37|39)$/) != (-1) ) ||
		( typeof(event.charCode) != 'undefined' && event.charCode == event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13)$/) != (-1) ) ) {
		return true;
	} else {
		return false;
	}
}

OLD WAY OF DOING THINGS
A simple method of data entry consistency is to prevent the end-user from entering in invalid characters in a specific form field. A great deal of expense can be saved by performing this all within JavaScript on the client's machine - as has been proven and been accepted practice for years. I've been finding restricting the characters on a specific form field as the user hits every key a more accepted practice; i.e. It's all over the place.

This restricting characters method is also supported functionality on a TextField datatype in Flash. Since all the work as of late has been with building RIA's in both AJAX and Flash, I attempt to take the best feature set for a specific "widget" of the application and duplicate it in the other format. Case in point, duplicating the TextField.restrict functionality within the browser.

Here's a very simple function to capture each onKeyDown event from an input of type=text. It will check the individual key press against the supplied RegEx in the arguments. It will also ignore control characters as follows: And the code: 
<head>
<script>
	function reKeyPress(event, keyRE) {
		var strr = "";
		for(var i in event) {
			strr += "\n" + i + " - " + event[i];
		}
		document.testing.eventBox.value = strr;
		document.testing.cCodePress.value = event.charCode;
		document.testing.kCodePress.value = event.keyCode;

		if (	( typeof(event.keyCode) != 'undefined' && event.keyCode > 0 && String.fromCharCode(event.keyCode).search(keyRE) != (-1) ) || 
			( typeof(event.charCode) != 'undefined' && event.charCode > 0 && String.fromCharCode(event.charCode).search(keyRE) != (-1) ) ||
			( typeof(event.charCode) != 'undefined' && event.charCode != event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13|45|46|35|36|37|39)$/) != (-1) ) ||
			( typeof(event.charCode) != 'undefined' && event.charCode == event.keyCode && typeof(event.keyCode) != 'undefined' && event.keyCode.toString().search(/^(8|9|13)$/) != (-1) ) ) {
			document.testing.pressValid.value = 'true';
			return true;
		} else {
			document.testing.pressValid.value = 'false';
			return false;
		}
	}
	function keyDownHandler(event) {
		document.testing.cCodeDown.value = event.charCode;
		document.testing.kCodeDown.value = event.keyCode;
	}
</script>
</head>
<form name="testing">
north american 10digit phone number: <input type="text" size=10 maxlength=10 onKeyPress="return reKeyPress(event, /[0-9]/);" onKeyDown="keyDownHandler(event);">
<table>
	<tr>
		<td colspan=3>

			<textarea cols=50 rows=20 name="eventBox"></textarea>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>onKeyPress</td>
		<td>onKeyDown</td>

	</tr>
	<tr>
		<td>charCode</td>
		<td><input type="text" size=10 maxlength=10 name="cCodePress" value=""></td>
		<td><input type="text" size=10 maxlength=10 name="cCodeDown" value=""></td>
	</tr>
	<tr>
		<td>keyCode</td>

		<td><input type="text" size=10 maxlength=10 name="kCodePress" value=""></td>
		<td><input type="text" size=10 maxlength=10 name="kCodeDown" value=""></td>
	</tr>
	<tr>
		<td>passes?</td>
		<td><input type="text" size=10 maxlength=10 name="pressValid" value=""></td>
		<td><input type="text" size=10 maxlength=10 name="downValid" value=""></td>
	</tr>

</table>
</form>
comments
loading
new comment
NAME
EMAIL ME ON UPDATES
EMAIL (hidden)
URL
MESSAGE TAGS ALLOWED: <code> <a> <pre class="code [tab4|tabX|inline|bash]"> <br>
PREVIEW COMMENT
TURING TEST
gravatar