简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

텍스트 영역의 입력 단어 수를 제한하는 jquery 구현의 자세한 예

小云云
풀어 주다： 2017-12-29 10:41:43
원래의
1119명이 탐색했습니다.

jquery는 텍스트 영역에 입력되는 단어 수를 어떻게 제한하나요? 이 글에서는 jquery를 사용하여 텍스트 영역에 입력되는 단어 수를 제한하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

필요한 친구들은 제가 작성한 예시를 참고할 수 있습니다. 물론, 실수가 있다면 모두 지적해 주시고 함께 배우고 발전할 수 있기를 바랍니다. 


<!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>
로그인 후 복사

관련 권장사항:

html의