夏日博客

A-A+

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

2016年01月27日 前端设计 暂无评论 阅读 5 views 次

这种代码功能是当用户输入字符时我们会提示能输入多少个，还可以输入多少个字符，到达限制长度时会提示只能输入指定长度字符。

JS统计文本框字符串，并实时显示剩下字符数，效果如本博客评论字数限制效果，在这里共享一下，在上传文 字作品的时候，我相信这会在用户体验上有一个不错的效果。

代码比较简单:

  1. .<script   language="JavaScript">        
  2.   <!--//        
  3.  function   textCounter(field,   countfield,   maxlimit)   {        
  4.   //   定义函数，传入3个参数，分别为表单区的名字，表单域元素名，字符限制；        
  5.  if   (field.value.length   >   maxlimit)          
  6.   //如果元素区字符数大于最大字符数，按照最大字符数截断；          
  7.  field.value   =   field.value.substring(0,   maxlimit);        
  8.   else        
  9.  //在记数区文本框内显示剩余的字符数；          
  10.   countfield.value   =   maxlimit   -   field.value.length;        
  11.   }        
  12.  //-->        
  13. </script>  

完整实例,代码如下:

  1. <table border="0" cellpadding="0" style="border-style:solid; border-width:1px; padding:1px; border-collapse: collapse" bordercolor="#CCCCCC" width="100%" height="184">  
  2.                                             
  3.                                           <form action="return1_w.php" method="POST" target="_blank" style="margin:0px; padding:0px;">  
  4.                                             <tr>  
  5.                                               <td width="96" height="20"><div align="right" style="font-size:12px">用户名：</div></td>  
  6.                                               <td height="20">&nbsp;&nbsp;  
  7.                                                 <input   readonly="readonly"   type="text"   name="remLen"   size="4"   maxlength="3"   value="150" />  
  8.                                               个字符(可以在这里给我评论或建议哦^_^)</td>  
  9.                                             </tr>  
  10.                                             <tr>  
  11.                                               <td width="96" height="71"><script   language="JavaScript">     
  12.   <!--//     
  13.   function   textCounter(field,   countfield,   maxlimit)   {     
  14.   //   定义函数，传入3个参数，分别为表单区的名字，表单域元素名，字符限制；     
  15.   if   (field.value.length   >   maxlimit)       
  16.   //如果元素区字符数大于最大字符数，按照最大字符数截断；       
  17.   fieldfield.value   =   field.value.substring(0,   maxlimit);     
  18.   else     
  19.   //在记数区文本框内显示剩余的字符数；       
  20.   countfield.value   =   maxlimit   -   field.value.length;     
  21.   }     
  22.   //-->     
  23.                                         </script>  
  24.                                                   <div align="right" style="font-size:12px">回复内容：</div></td>  
  25.                                               <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>  
  26.                                             </tr>  
  27.                                             <tr>  
  28.                                               <td height="30" colspan="2"><div align="center">  
  29.                                                   <input type="submit" value="发布" name="hf" />  
  30.                                               </div></td>  
  31.                                             </tr>  
  32.                                             <tr>  
  33.                                               <td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">  
  34.                                                   <tr>  
  35.                                                     <td width="100%" height="1" colspan="4"></td>  
  36.                                                   </tr>  
  37.                                               </table></td>  
  38.                                             </tr>  
  39.                                           </form>  
  40.                                         </table>  
标签：

给我留言