龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript实时显示限制字符输入个数并给出提示

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
这种代码功能是当用户输入字符时我们会提示能输入多少个,还可以输入多少个字符,到达限制长度时会提示只能输入指定长度字符。 JS统计文本框字符串,并实时显示剩下字符数,效
这种代码功能是当用户输入字符时我们会提示能输入多少个,还可以输入多少个字符,到达限制长度时会提示只能输入指定长度字符。

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">&nbsp;&nbsp;
                                                <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>


精彩图集

赞助商链接