Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Detailliertes Beispiel einer JQuery-Implementierung zur Begrenzung der Anzahl der Eingabewörter im Textbereich

Detailliertes Beispiel einer JQuery-Implementierung zur Begrenzung der Anzahl der Eingabewörter im Textbereich

小云云
Freigeben： 2017-12-29 10:41:43
Original
1142 Leute haben es durchsucht

Wie begrenzt JQuery die Anzahl der in einen Textbereich eingegebenen Wörter? In diesem Artikel wird hauptsächlich die Methode zur Begrenzung der Anzahl der in den Textbereich eingegebenen Wörter vorgestellt. Interessierte Freunde können darauf verweisen.

Freunde in Not können sich auf die Beispiele beziehen, die ich geschrieben habe. Natürlich hoffe ich, dass jeder rechtzeitig darauf hinweisen kann, damit wir daraus lernen und gemeinsam Fortschritte machen können. 


<!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>
Nach dem Login kopieren

Verwandte Empfehlungen:

HTML's