복붙노트

[JQUERY] 텍스트 영역의 문자 카운트

JQUERY

텍스트 영역의 문자 카운트

해결법


  1. 1.어떤 오류는 브라우저에서보고있는? 코드는 내가 확실히 알 수없는 모르고 있지만, 당신은 불완전 무엇을 게시하는 경우 작동하지 않는 이유를 이해할 수있다.

    어떤 오류는 브라우저에서보고있는? 코드는 내가 확실히 알 수없는 모르고 있지만, 당신은 불완전 무엇을 게시하는 경우 작동하지 않는 이유를 이해할 수있다.

    <!DOCTYPE html>
    <html>
      <head>
        <script src="http://code.jquery.com/jquery-1.5.js"></script>
        <script>
          function countChar(val) {
            var len = val.value.length;
            if (len >= 500) {
              val.value = val.value.substring(0, 500);
            } else {
              $('#charNum').text(500 - len);
            }
          };
        </script>
      </head>
    
      <body>
        <textarea id="field" onkeyup="countChar(this)"></textarea>
        <div id="charNum"></div>
      </body>
    
    </html>
    

    ... 나를 위해 잘 작동합니다.

    편집 : 그들이 한도를 초과하는 경우 당신은 아마의 charNum div의, 또는 쓰기 뭔가를 지워야합니다.


  2. 2.캐 터햄의 기능을 기반으로 향상된 버전 :

    캐 터햄의 기능을 기반으로 향상된 버전 :

    $('#field').keyup(function () {
      var max = 500;
      var len = $(this).val().length;
      if (len >= max) {
        $('#charNum').text(' you have reached the limit');
      } else {
        var char = max - len;
        $('#charNum').text(char + ' characters left');
      }
    });
    

  3. 3.여기 KeyUp 이벤트가 해고되지 않습니다 두 시나리오는 다음과 같습니다

    여기 KeyUp 이벤트가 해고되지 않습니다 두 시나리오는 다음과 같습니다

    대신 더 강력한 솔루션을위한 HTML5 입력 이벤트를 사용합니다 :

    <textarea maxlength='140'></textarea>
    

    자바 스크립트 (데모) :

    const textarea = document.querySelector("textarea");
    
    textarea.addEventListener("input", event => {
        const target = event.currentTarget;
        const maxLength = target.getAttribute("maxlength");
        const currentLength = target.value.length;
    
        if (currentLength >= maxLength) {
            return console.log("You have reached the maximum number of characters.");
        }
    
        console.log(`${maxLength - currentLength} chars left`);
    });
    

    그리고 당신은 절대적으로 jQuery를 사용하려는 경우 :

    $('textarea').on("input", function(){
        var maxlength = $(this).attr("maxlength");
        var currentLength = $(this).val().length;
    
        if( currentLength >= maxlength ){
            console.log("You have reached the maximum number of characters.");
        }else{
            console.log(maxlength - currentLength + " chars left");
        }
    });
    

  4. 4.<-> ID = "rem_post"각각의 특정 텍스트 영역의 원하는 문자의 양을 보유하고 스팬의 제목 ID = "포스트"나는 카운터를 필요한 곳에 사용되는 HTML 샘플은, 텍스트 영역과 두 번째 스팬의 ID의 관련성을 알

    <-> ID = "rem_post"각각의 특정 텍스트 영역의 원하는 문자의 양을 보유하고 스팬의 제목 ID = "포스트"나는 카운터를 필요한 곳에 사용되는 HTML 샘플은, 텍스트 영역과 두 번째 스팬의 ID의 관련성을 알

    <textarea class="countit" name="post" id="post"></textarea>
    <p>
      <span>characters remaining: <span id="rem_post" title="1000"></span></span>
    </p>
    

    일반적으로 앞에 위치 자바 스크립트 함수는, 내 템플릿 파일에, jQuery를 필요

    $(".countit").keyup(function () {
      var cmax = $("#rem_" + $(this).attr("id")).attr("title");
    
      if ($(this).val().length >= cmax) {
        $(this).val($(this).val().substr(0, cmax));
      }
    
      $("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);
    
    });
    

  5. 5.이 나를 위해 벌금을했다.

    이 나를 위해 벌금을했다.

    $('#customText').on('keyup', function(event) {
       var len = $(this).val().length;
       if (len >= 40) {
          $(this).val($(this).val().substring(0, len-1));
       }
    });
    

  6. 6.() 요구 하위 문자열 SUBSTR가되기 위해 ().

    () 요구 하위 문자열 SUBSTR가되기 위해 ().

    예 : jsfiddle.net/xqyWV


  7. 7.음,이왔다 것과 다른 말한 것이 아니라,이 모든 브라우저에서 잘 작동합니다.

    음,이왔다 것과 다른 말한 것이 아니라,이 모든 브라우저에서 잘 작동합니다.

    아이디어는 정의 된 길이를 오버 플로우 텍스트를 삭제하는 것입니다.

    function countTextAreaChar(txtarea, l){
        var len = $(txtarea).val().length;
        if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
        else $('#charNum').text(l - len);
        }
    

    HTML 코드는 다음과 같습니다

    <div id="charNum"></div>
    <textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>
    

  8. 8.HTML

    HTML

    <form method="post">
    <textarea name="postes" id="textAreaPost" placeholder="Write what's you new" maxlength="500"></textarea>
    
    <div id="char_namb" style="padding: 4px; float: right; font-size: 20px; font-family: Cocon; text-align: center;">500 : 0</div>
    </form>
    

    jQuery를

    $(function(){
        $('#textAreaPost').keyup(function(){
          var charsno = $(this).val().length;
          $('#char_namb').html("500 : " + charsno);
        });
    });
    

  9. 9.나는 위의 조합을했다. Backspacing을 경우에도 그것은 텍스트 입력의 정지를 허용하고 백 스페이스를 허용 플러스 카운트를 유지한다 :

    나는 위의 조합을했다. Backspacing을 경우에도 그것은 텍스트 입력의 정지를 허용하고 백 스페이스를 허용 플러스 카운트를 유지한다 :

    자바 스크립트 코드 :

    $(document).ready(function () {
    
      $('#giftmsg').keypress(function (event) {
        var max = 250;
        var len = $(this).val().length;
    
        if (event.which < 0x20) {
          // e.which < 0x20, then it's not a printable character
          // e.which === 0 - Not a character
          return; // Do nothing
        }
    
        if (len >= max) {
          event.preventDefault();
        }
    
      });
    
      $('#giftmsg').keyup(function (event) {
        var max = 250;
        var len = $(this).val().length;
        var char = max - len;
    
        $('#textleft').text(char + ' characters left');
    
      });
    
    });
    

    HTML :

    <div class="col3">
        <h2>3. Optional gift message</h2>
        Enter gift message. Limit 250 characters.<br /><br />
        <textarea cols="36" rows="5" id="giftmsg" ></textarea>
        <a style="padding:7px 0 0 0" href="#">Save Message</a>
        <div id="textleft">250 characters left</div>
    </div>
    

    내 앞에 그 포스터 신용 !! 이 사람을 도움이되기를 바랍니다!


  10. 10.나는이 작업을 위해 내 자신의 jQuery 플러그인을 작성, 당신은 그것을 여기 시도 할 수 있습니다 :

    나는이 작업을 위해 내 자신의 jQuery 플러그인을 작성, 당신은 그것을 여기 시도 할 수 있습니다 :

    http://jsfiddle.net/Sk8erPeter/8NF4r/

    당신은 당신이 접미사 텍스트를 정의 할 수 있습니다 - 더 - 플라이 (그리고 남은 문자 카운터), 당신은, 당신은 텍스트를 잘라할지 여부를 정의 할 수 있습니다 문자 카운터를 만들 수 있으며 또한 짧은 형식과의 구분을 정의 할 수 있습니다.

    다음은 사용 예는 다음과 같습니다

    $(document).ready(function () {
    
        $('#first_textfield').characterCounter();
    
        $('#second_textfield').characterCounter({
            maximumCharacters: 20,
            chopText: true
        });
    
        $('#third_textfield').characterCounter({
            maximumCharacters: 20,
            shortFormat: true,
            shortFormatSeparator: " / ",
            positionBefore: true,
            chopText: true
        });
    
        $('#fourth_textfield').characterCounter({
            maximumCharacters: 20,
            characterCounterNeeded: true,
            charactersRemainingNeeded: true,
            chopText: false
        });
    
        $('#first_textarea').characterCounter({
            maximumCharacters: 50,
            characterCounterNeeded: true,
            charactersRemainingNeeded: false,
            chopText: true
        });
    
        $('#second_textarea').characterCounter({
            maximumCharacters: 25
        });
    
    });
    

    여기에 플러그인의 코드는 다음과 같습니다

    /**
     * Character counter and limiter plugin for textfield and textarea form elements
     * @author Sk8erPeter
     */ 
    (function ($) {
      $.fn.characterCounter = function (params) {
        // merge default and user parameters
        params = $.extend({
          // define maximum characters
          maximumCharacters: 1000,
          // create typed character counter DOM element on the fly
          characterCounterNeeded: true,
          // create remaining character counter DOM element on the fly
          charactersRemainingNeeded: true,
          // chop text to the maximum characters
          chopText: false,
          // place character counter before input or textarea element
          positionBefore: false,
          // class for limit excess
          limitExceededClass: "character-counter-limit-exceeded",
          // suffix text for typed characters
          charactersTypedSuffix: " characters typed",
          // suffix text for remaining characters
          charactersRemainingSuffixText: " characters left",
          // whether to use the short format (e.g. 123/1000)
          shortFormat: false,
          // separator for the short format
          shortFormatSeparator: "/"
        }, params);
    
        // traverse all nodes
        this.each(function () {
          var $this = $(this),
            $pluginElementsWrapper,
            $characterCounterSpan,
            $charactersRemainingSpan;
    
          // return if the given element is not a textfield or textarea
          if (!$this.is("input[type=text]") && !$this.is("textarea")) {
            return this;
          }
    
          // create main parent div
          if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
            // create the character counter element wrapper
            $pluginElementsWrapper = $('<div>', {
              'class': 'character-counter-main-wrapper'
            });
    
            if (params.positionBefore) {
              $pluginElementsWrapper.insertBefore($this);
            } else {
              $pluginElementsWrapper.insertAfter($this);
            }
          }
    
          if (params.characterCounterNeeded) {
            $characterCounterSpan = $('<span>', {
              'class': 'counter character-counter',
              'text': 0
            });
    
            if (params.shortFormat) {
              $characterCounterSpan.appendTo($pluginElementsWrapper);
    
              var $shortFormatSeparatorSpan = $('<span>', {
                'html': params.shortFormatSeparator
              }).appendTo($pluginElementsWrapper);
    
            } else {
              // create the character counter element wrapper
              var $characterCounterWrapper = $('<div>', {
                'class': 'character-counter-wrapper',
                'html': params.charactersTypedSuffix
              });
    
              $characterCounterWrapper.prepend($characterCounterSpan);
              $characterCounterWrapper.appendTo($pluginElementsWrapper);
            }
          }
    
          if (params.charactersRemainingNeeded) {
    
            $charactersRemainingSpan = $('<span>', {
              'class': 'counter characters-remaining',
              'text': params.maximumCharacters
            });
    
            if (params.shortFormat) {
              $charactersRemainingSpan.appendTo($pluginElementsWrapper);
            } else {
              // create the character counter element wrapper
              var $charactersRemainingWrapper = $('<div>', {
                'class': 'characters-remaining-wrapper',
                'html': params.charactersRemainingSuffixText
              });
              $charactersRemainingWrapper.prepend($charactersRemainingSpan);
              $charactersRemainingWrapper.appendTo($pluginElementsWrapper);
            }
          }
    
          $this.keyup(function () {
    
            var typedText = $this.val();
            var textLength = typedText.length;
            var charactersRemaining = params.maximumCharacters - textLength;
    
            // chop the text to the desired length
            if (charactersRemaining < 0 && params.chopText) {
              $this.val(typedText.substr(0, params.maximumCharacters));
              charactersRemaining = 0;
              textLength = params.maximumCharacters;
            }
    
            if (params.characterCounterNeeded) {
              $characterCounterSpan.text(textLength);
            }
    
            if (params.charactersRemainingNeeded) {
              $charactersRemainingSpan.text(charactersRemaining);
    
              if (charactersRemaining <= 0) {
                if (!$charactersRemainingSpan.hasClass(params.limitExceededClass)) {
                  $charactersRemainingSpan.addClass(params.limitExceededClass);
                }
              } else {
                $charactersRemainingSpan.removeClass(params.limitExceededClass);
              }
            }
          });
    
        });
    
        // allow jQuery chaining
        return this;
    
      };
    })(jQuery);
    

  11. 11.나는 이것이 내가 생각 해낸 것입니다이 같은 일을 수행하는 방법을 궁금해하고 모두 여기에서 아이디어를 복용했다 :

    나는 이것이 내가 생각 해낸 것입니다이 같은 일을 수행하는 방법을 궁금해하고 모두 여기에서 아이디어를 복용했다 :

    JsFiddle

    <textarea name="message" rows="4" cols="24" maxlength="1000" id="message" placeholder="Message:" style=""></textarea><br/>
    <span id="charNum"></span>
    
    $('#message').keyup(function () {
      max = this.getAttribute("maxlength");
      var len = $(this).val().length;
       if (len >= max) {
        $('#charNum').text(' you have reached the limit');
       } else {
        var char = max - len;
        $('#charNum').text(char + ' characters left');
       }
    });
    

  12. 12.

    $.fn.extend( {
           limiter: function(limit, elem) {
                $(this).on("keyup focus", function() {
                   setCount(this, elem);
               });
                function setCount(src, elem) {
                   var chars = src.value.length;
                    if (chars > limit) {
                        src.value = src.value.substr(0, limit);
                        chars = limit;
                    }
                    elem.html( limit - chars );
                }
                setCount($(this)[0], elem);
            }
        });
    
        var elem = $("#cntr");  
        $("#status_txt").limiter(160, elem);
    

  13. 13.

    $(document).ready(function() {
        var count = $("h1").text().length;
        alert(count);
    });
    

    또한, 텍스트 영역 문자열의 캐릭터를 계산 자신의 요소 ID 또는 대신 "H1"길이 이벤트의 클래스를 넣을 수 있습니다 ☻


  14. 14.코드는 혼합 조금이었다. 여기에 깨끗한 버전입니다 :

    코드는 혼합 조금이었다. 여기에 깨끗한 버전입니다 :

    <script type="text/javascript">
        $(document).ready(function() {
            $("#add").click(function() {
                $.post("SetAndGet.php", {
                    know: $("#know").val()
                }, function(data) {
                    $("#know_list").html(data);
                });
            });
    
            function countChar(val) {
                var len = val.value.length;
                if (len >= 500) {
                    val.value = val.value.substring(0, 500);
                } else {
                    $('#charNum').text(500 - len);
                }
            }
        });
    </script>
    

  15. 15.이걸로 해봐.

    이걸로 해봐.

    <textarea maxlength="410" name="about_me" onkeydown="CountLeft(this.form.about_me, this.form.left);" onkeyup="CountLeft(this.form.about_me,this.form.left); "></textarea>
    
    <input maxlength="3" name="left" readonly="" size="3" type="text" value="410" /> characters left
    
    <script>
    function CountLeft(field, count) 
    {
        var max = "410";
        if (field.value.length > max)
        {
            field.value = field.value.substring(0, max);
        }
        else
        {
            count.value = max - field.value.length;
        }
    }
    </script>
    

  16. 16.보다 일반 버전은 두 개 이상의 필드에 대한 기능을 사용할 수 있습니다.

    보다 일반 버전은 두 개 이상의 필드에 대한 기능을 사용할 수 있습니다.

    <script src="../site/jquery/jquery.min.js" ></script>
    <script type="text/javascript">
    
    function countChar(inobj, maxl, outobj) {
        var len = inobj.value.length;
        var msg = ' chr left';
        if (len >= maxl) {
            inobj.value = inobj.value.substring(0, maxl);
            $(outobj).text(0 + msg);
        } else {
            $(outobj).text(maxl - len + msg);
        }
    }
    
    
    $(document).ready(function(){
    
        //set up summary field character count
        countChar($('#summary').get(0),500, '#summarychrs'); //show inital value on page load
        $('#summary').keyup(function() {
            countChar(this, 500, '#summarychrs'); //set up on keyup event function
        });
    
    });
    </script>
    
    <textarea name="summary" id="summary" cols="60" rows="3" ><?php echo $summary ?></textarea> 
    <span id="summarychrs">0</span>
    

  17. 17.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    
        <script>
    
                function countChar(val) 
                {
    
                 var limit = 1024;
    
                if ( val.length > limit )
                  { 
                  $("#comment").val(val.substring(0, limit-1));
                  val.length = limit;
                  }
    
                  $("#count").html((limit)-(val.length));     
                  }
    
            </script>
    
            <textarea id="comment" onKeyUp="countChar(this.value)" required></textarea>
    
            <div id="count"></div>
    

    다른 사용 건너 뛰고도 부정적인 수를 점점 건너 뛰려면 다음을 사용합니다.


  18. 18.내 예를 들어 여기. 만찬의 간단한 $ (문서) .ready (함수 () { var에 텍스트 영역 = $ ( "#의 my_textarea"); textarea.keydown (함수 (이벤트) { VAR의 numbOfchars textarea.val = (); VAR LEN = numbOfchars.length; $ ( "문자 카운터.") 텍스트 (렌).; }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <텍스트 영역 ID = "my_textarea"클래스 = "영국 텍스트 영역"행 = "5"NAME = "텍스트">

    0

    내 예를 들어 여기. 만찬의 간단한 $ (문서) .ready (함수 () { var에 텍스트 영역 = $ ( "#의 my_textarea"); textarea.keydown (함수 (이벤트) { VAR의 numbOfchars textarea.val = (); VAR LEN = numbOfchars.length; $ ( "문자 카운터.") 텍스트 (렌).; }); }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <텍스트 영역 ID = "my_textarea"클래스 = "영국 텍스트 영역"행 = "5"NAME = "텍스트">

    0


  19. 19.우리는 목적의 솔루션 중 하나에 만족하지 않았다.

    우리는 목적의 솔루션 중 하나에 만족하지 않았다.

    그래서 우리는 JQuery와 - jeditable 위에 구축 JQuery와에 대한 완전한 문자 카운터 솔루션을 만들었습니다. 이 방법, 디스플레이 사용자 정의 메시지, 한계 문자 수와도 JQuery와-datatables를 모두 지원에 믿을 수있는 텍스트 영역 플러그인 확장입니다.

    당신은 바로 JSFiddle에 그것을 테스트 할 수 있습니다.

    GitHub의 링크 : https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount

    당신의 HTML에 다음 줄을 추가합니다 :

    <script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/realworld_jquery_jeditable_charcount@1.0.0/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/realworld_jquery_jeditable_charcount@1.0.0/dist/jquery.charcounter.realworld.min.js"></script>
    

    그리고:

    $("#myTextArea4").charCounter();
    

  20. 20.

    $('#field').keyup(function () {
        var max = 160;
        var len = $(this).val().length;
    //  var char = max - len;
        var messages = Math.ceil(len / 160);
        if (len >= max) {
            $('#charNum').text('(' + messages + ') ' + len + '/' + max);
        } else {
            $('#charNum').text(len + '/' + max);
        }
        });
    

  21. 21.U 사용할 수 있습니다 :

    U 사용할 수 있습니다 :

        $(document).ready(function () {
      $('#ID').keyup(function () {
       var val = $(this).val();
       len = val.length;
       if (len >= 140) {
        $(this).text(val.substring(0, 140));
       } else {
        console.log(140 - len);
        $('#charNum').empty().append(140 - len);
       }
      });
     });
    
  22. from https://stackoverflow.com/questions/5371089/count-characters-in-textarea by cc-by-sa and MIT license