显示input已经输入的文字数量和剩余可以输入的字符数量

最新推荐文章于 2024-03-09 14:25:58 发布

最新推荐文章于 2024-03-09 14:25:58 发布 · 2.1k 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种在网页表单中实时显示已输入字符数量及剩余可用字符数量的方法，通过使用JavaScript插件实现对输入框和文本区域的字符长度监控。

显示input已经输入的文字数量和剩余可以输入的字符数量

演示

   XML/HTML Code
  

   <div id="content">  
      
    <div class="content-box">  
      <label>Username:</label> <input type="text" data-minlength="4" data-maxlength="32" style="width:100px;"/><br/>  
      <label>Bio:</label> <textarea cols="30" rows="6" data-minlength="10" data-maxlength="200" style="width:165px;"></textarea>  
        
      <link rel="Stylesheet" type="text/css" href="./wChar.css" />  
      <script type="text/javascript" src="./wChar.min.js"></script>  
        
      <style>  
        label {  
          display: inline-block;  
          *display: inline;   
          zoom: 1;  
          width: 80px;  
          text-align: right;  
          vertical-align: top;  
        }  
      </style>  
  
      <script type="text/javascript">  
        $('input:text, input:password, textarea').wChar({message: 'left', messageMin: 'to go'});  
      </script>  
    </div>  
  </div>  

  