JavaScript: Form Field Maxlength
Introduction
Author: Martin WarningYear: 2007
License: Free
This is an example function that will switch focus to a different field when the ammount of characters entered has reaced the maximum value set. The second example shows a useful implementation of this function.
Code
Languages:- JavaScript
- XHTML
<script language="JavaScript" type="text/javascript">
//<![CDATA[
// Values to pass are
// strFieldName = Name of field being typed in
// intFieldLength = Max length allowed in the field
// strFieldNew = The field focus should switch to
function maxlength(strFieldName, intFieldLength, strFieldNew){
if (document.frmMaxlength[strFieldName].value.length == intFieldLength) {
document.frmMaxlength[strFieldNew].focus();
}
}
// End -->
//]]>
</script>
The code for the form:
<form name="frmMaxlength">
<input type="text" name="txtMaxtext" maxlength="3" onkeyup="maxlength('txtMaxtext',3,'txtMaxtext2');" />
<input type="text" name="txtMaxtext2" />
</form>
3 parameters are passed to the function, the current fields name, the new fields name and the maxlength value.
Example: See it in action
The code for the JavaScript function (located in <head>):
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var strFieldNameValue
// Values to pass are
// strFieldName = Name of field being typed in
// intFieldLength = Max length allowed in the field
// strFieldNew = The field focus should switch to
function maxlength(strFieldName, intFieldLength, strFieldNew){
strFieldNameValue = ''
for(i=0; i<document.frmMaxlength[strFieldName].value.length; i++)
{
// Check if user typed .in order to switch to next field
if (document.frmMaxlength[strFieldName].value.charAt(i) == '.')
{
// Field contains .
// First delete the typed .
document.frmMaxlength[strFieldName].value=strFieldNameValue;
// Then set focus to the next field
document.frmMaxlength[strFieldNew].focus();
break;
}
else {
// Get the complete field value
strFieldNameValue = strFieldNameValue + document.frmMaxlength[strFieldName].value.charAt(i)
// If maxlength is reached set focus to next field
if (document.frmMaxlength[strFieldName].value.length == intFieldLength) {
document.frmMaxlength[strFieldNew].focus();
}
}
}
}
// End -->
//]]>
</script>
The code for the form:
<form name="frmMaxlength"> IP: <input type="text" name="txtMaxtext" maxlength="3" size="3" onkeyup="maxlength('txtMaxtext',3,'txtMaxtext2');" /> . <input type="text" name="txtMaxtext2" maxlength="3" size="3" onkeyup="maxlength('txtMaxtext2',3,'txtMaxtext3');" /> . <input type="text" name="txtMaxtext3" maxlength="3" size="3" onkeyup="maxlength('txtMaxtext3',3,'txtMaxtext4');" /> <input type="text" name="txtMaxtext4" maxlength="3" size="3" /> </form>
This example adds some functionality to the function. In this case besides reaching the maxlength also an entered . (dot) will switch focus to the next field. This allows for quick data entry for the user.
example.zip
