Home >Web Front-end >JS Tutorial >Detailed example of jquery implementation to limit the number of input words in textarea

Detailed example of jquery implementation to limit the number of input words in textarea

小云云
小云云Original
2017-12-29 10:41:431170browse

How does jquery limit the number of words entered in textarea? This article mainly introduces in detail the method of using jquery to limit the number of words entered in a textarea. It has certain reference value. Interested friends can refer to it. I hope it can help you.

Friends in need can refer to the examples I wrote. Of course, if there are any mistakes, I hope everyone can point them out in time so that we can learn and make progress together.


<!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>

Related recommendations: How to use

#html's4750256ae76b6b9d804861d8f69e79d3

Example details How to add line numbers to the Textarea text box in JavaScript

The perfect solution to the prompt text of the textarea input box in html that the default content must be added

The above is the detailed content of Detailed example of jquery implementation to limit the number of input words in textarea. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn