Maison > interface Web > js tutoriel > Exemple détaillé d'implémentation de jquery pour limiter le nombre de mots d'entrée dans la zone de texte

Exemple détaillé d'implémentation de jquery pour limiter le nombre de mots d'entrée dans la zone de texte

小云云
Libérer: 2017-12-29 10:41:43
original
1149 Les gens l'ont consulté

Comment jquery limite-t-il le nombre de mots saisis dans une zone de texte ? Cet article présente principalement en détail la méthode d'utilisation de jquery pour limiter le nombre de mots saisis dans la zone de texte. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Les amis dans le besoin peuvent se référer aux exemples que j'ai écrits. Bien sûr, s'il y a des erreurs, j'espère que tout le monde pourra les signaler à temps afin que nous puissions apprendre et progresser ensemble.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>textarea 限制字数</title>
 <style>
  .container{
   position: relative;
   width: 730px;
  }
  .container span{
   position: absolute;
   bottom: 20px;
   right: 30px;
  }
 </style>
</head>
<body>
 <p class="container">
  <textarea name="content" id="content" cols="100" rows="10"></textarea>
  <span>0/10</span>
 </p>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script>
  $(function(){
    /**
    * textarea 限制输入字数
    * @param string str 类名或ID
    * @param number num 限制输入的字数
    */
   function limitImport(str,num){
    $(document).on(&#39;input propertychange&#39;,str,function(){
     var self = $(this);
     var content = self.val();
     if (content.length > num){
      self.val(content.substring(0,num));
     } 
     self.siblings(&#39;span&#39;).text(self.val().length+&#39;/&#39;+num);
    });
   }

   //用法示例
   limitImport(&#39;#content&#39;,10);

  })
 </script>
</body>
</html>
Copier après la connexion

Recommandations associées :