Max Length validation is sometime doesn't give the right impact on the user as user has something in mind to type but at the end he/she came to know becuase of the max length of the field user is not allowed to type that long comment/value. So, better way is to display how many characters left from the total max length which user can enter in the field while he/she is entring the value of the field.
Code for the same is mentioned below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="java-script">
function textCounter(field, countfield, maxlimit)
{
if (field.value.length > maxlimit)
{
field.value = field.value.substring(0, maxlimit);
}
else
{
countfield.value = maxlimit - field.value.length;
}
}
</script>
<style
.txtBoxes
{
border:solid 1px DarkGray;
width:100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="0">
<tr>
<td>
<textarea "textCounter(areaTxtDetails, remlen, 10);" "textCounter(areaTxtDetails, remlen, 10);"
id="areaTxtDetails" "textCounter(areaTxtDetails, remlen, 10);" "textCounter(areaTxtDetails, remlen, 10);"
name="areaTxtDetails" rows="2" cols="65" class="areaTxtDetails" runat="server"> </textarea>
</td>
</tr>
<tr>
<td>
<span style="font-family:Arial;font-size:78%;">You have</span> <input type="text" id="remlen" cssclass="txtBoxes" width="30px"> <span style="font-family:Arial;font-size:78%;">characters remaining.</span>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment