这种代码功能是当用户输入字符时我们会提示能输入多少个,还可以输入多少个字符,到达限制长度时会提示只能输入指定长度字符。
JS统计文本框字符串,并实时显示剩下字符数,效果如本博客评论字数限制效果,在这里共享一下,在上传文 字作品的时候,我相信这会在用户体验上有一个不错的效果。
代码比较简单:
JavaScript代码01
代码如下 |
|
.<script language="JavaScript">
<!--//
function textCounter(field, countfield, maxlimit) {
// 定义函数,传入3个参数,分别为表单区的名字,表单域元素名,字符限制;
if (field.value.length > maxlimit)
//如果元素区字符数大于最大字符数,按照最大字符数截断;
field.value = field.value.substring(0, maxlimit);
else
//在记数区文本框内显示剩余的字符数;
countfield.value = maxlimit - field.value.length;
}
//-->
</script> |
完整实例
代码如下 |
|
<table border="0" cellpadding="0" style="border-style:solid; border-width:1px; padding:1px; border-collapse: collapse" bordercolor="#CCCCCC" width="100%" height="184">
<form action="return1_w.php" method="POST" target="_blank" style="margin:0px; padding:0px;">
<tr>
<td width="96" height="20"><div align="right" style="font-size:12px">用户名:</div></td>
<td height="20">
<input readonly="readonly" type="text" name="remLen" size="4" maxlength="3" value="150" />
个字符(可以在这里给我评论或建议哦^_^)</td>
</tr>
<tr>
<td width="96" height="71"><script language="JavaScript">
<!--//
function textCounter(field, countfield, maxlimit) {
// 定义函数,传入3个参数,分别为表单区的名字,表单域元素名,字符限制;
if (field.value.length > maxlimit)
//如果元素区字符数大于最大字符数,按照最大字符数截断;
field.value = field.value.substring(0, maxlimit);
else
//在记数区文本框内显示剩余的字符数;
countfield.value = maxlimit - field.value.length;
}
//-->
</script>
<div align="right" style="font-size:12px">回复内容:</div></td>
<td width="396" height="71"><textarea rows="4" name="neirong" cols="50" onKeyDown="textCounter(this.form.neirong,this.form.remLen,150);" onkeyup="textCounter(this.form.neirong,this.form.remLen,150);"> </textarea></td>
</tr>
<tr>
<td height="30" colspan="2"><div align="center">
<input type="submit" value="发布" name="hf" />
</div></td>
</tr>
<tr>
<td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%" height="1" colspan="4"></td>
</tr>
</table></td>
</tr>
</form>
</table>
|