[JQUERY] jQuery를 사용하여 텍스트 영역 및 디스플레이 라인 수의 행 수 제한

jQuery를 사용하여 텍스트 영역 및 디스플레이 라인 수의 행 수 제한

해결법

1. ---

   1.HTML :

   HTML :

   <textarea id="countMe" cols="30" rows="5"></textarea>
   <div class="theCount">Lines used: <span id="linesUsed">0</span><div>
   

   JS :

   $(document).ready(function(){
   
       var lines = 10;
       var linesUsed = $('#linesUsed');
   
       $('#countMe').keydown(function(e) {
   
           newLines = $(this).val().split("\n").length;
           linesUsed.text(newLines);
   
           if(e.keyCode == 13 && newLines >= lines) {
               linesUsed.css('color', 'red');
               return false;
           }
           else {
               linesUsed.css('color', '');
           }
       });
   });
   

   깡깡이: http://jsfiddle.net/XNCkH/17/

2. ---

   2.여기에 약간의 개선 된 코드입니다. 앞의 예에서 당신이 원하는 것을 줄 이상의 텍스트를 붙여 넣을 수 있습니다.

   여기에 약간의 개선 된 코드입니다. 앞의 예에서 당신이 원하는 것을 줄 이상의 텍스트를 붙여 넣을 수 있습니다.

   HTML

   <textarea data-max="10"></textarea>
   <div class="theCount">Lines used: <span id="linesUsed">0</span></div>
   

   JS

   jQuery('document').on('keyup change', 'textarea', function(e){
   
           var maxLines = jQuery(this).attr('data-max');        
           newLines = $(this).val().split("\n").length;
   
           console.log($(this).val().split("\n"));
   
           if(newLines >= maxLines) {
               lines = $(this).val().split("\n").slice(0, maxLines);
               var newValue = lines.join("\n");
               $(this).val(newValue);
               $("#linesUsed").html(newLines);
               return false;
           }
   
       });
   

3. ---

   3.훨씬 추한하지만, 어떻게 든 작업 예 텍스트 영역의 행을 지정

   훨씬 추한하지만, 어떻게 든 작업 예 텍스트 영역의 행을 지정

   <textarea rows="3"></textarea>
   

   그리고 JS에서

      $("textarea").on('keydown keypress keyup',function(e){
          if(e.keyCode == 8 || e.keyCode == 46){
              return true;
          }
          var maxRowCount = $(this).attr("rows") || 2;
           var lineCount = $(this).val().split('\n').length;
           if(e.keyCode == 13){
               if(lineCount == maxRowCount){
                   return false;
               }
           }
           var jsElement = $(this)[0];
           if(jsElement.clientHeight < jsElement.scrollHeight){
               var text = $(this).val();
               text= text.slice(0, -1);
               $(this).val(text);
               return false;
           }
   
       });
   

4. ---

   4.이 팬 아웃 및 바닐라 JS 이벤트 핸들러 가능한 흡기 반응 들어 :

   이 팬 아웃 및 바닐라 JS 이벤트 핸들러 가능한 흡기 반응 들어 :

   onChange={({ target: { value } }) => {
       const returnChar = /\n/gi
       const a = value.match(returnChar)
       const b = title.match(returnChar)
       if (value.length > 80 || (a && b && a.length > 1 && b.length === 1)) return
       dispatch(setState('title', value))
   }}
   

   이 예는 2 선 또는 총 80 개 문자 텍스트 영역을 제한한다.

   이 새로운 값으로 갱신 된 상태 텍스트 영역에 그 값을 추가하는 것을 방지 반작용 방지한다.

from https://stackoverflow.com/questions/6501043/limit-number-of-lines-in-textarea-and-display-line-count-using-jquery by cc-by-sa and MIT license