[jquery] 텍스트 영역의 문자 계산

Program / 글쓴이

텍스트 영역의 문자 수를 세고 싶기 때문에 방금 만들었습니다.

<textarea id="field" onkeyup="countChar(this)"></textarea>

function countChar(val){
     var len = val.value.length;
     if (len >= 500) {
              val.value = val.value.substring(0, 500);
     } else {
              $('#charNum').text(500 - len);
     }
};

내 코드에 어떤 문제가 있습니까? 작동하지 않습니다! 글쎄, 그건 초보자 손글씨 였는데 도움이 필요해.

답변

브라우저에 어떤 오류가 표시됩니까? 게시 한 내용이 불완전한 경우 코드가 작동하지 않는 이유를 이해할 수 있지만 확실하게 알 수는 없습니다.

<!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를 지우거나 제한을 초과하면 무언가를 작성해야합니다.

답변

Caterham의 기능을 기반으로 한 개선 된 버전 :

$('#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');
  }
});

답변

⚠️ 허용되는 솔루션에 결함이 있습니다.

다음은 keyup이벤트가 시작되지 않는 두 가지 시나리오입니다 .

  1. 사용자가 텍스트를 텍스트 영역으로 드래그합니다.
  2. 사용자는 마우스 오른쪽 버튼을 클릭하여 텍스트 영역에 텍스트를 복사하여 붙여 넣습니다 (컨텍스트 메뉴).

input보다 강력한 솔루션을 위해 대신 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");
    }
});

답변

카운터가 필요할 때마다 사용되는 HTML 샘플은 텍스트 영역 및 두 번째 범위의 ID의 관련성을 확인합니다. id="post"<-> id="rem_post"및 각 특정 텍스트 영역의 원하는 문자 양을 보유하는 범위의 제목

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

일반적으로 </body>템플릿 파일 앞에 배치되는 JavaScript 함수 에는 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);

});

답변

이것은 나를 위해 잘 작동했습니다.

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

답변

substring()될 필요가 substr()있습니다.

예 : jsfiddle.net/xqyWV

답변

글쎄, 이것은 말한 것과 크게 다르지 않지만 모든 브라우저에서 매우 잘 작동합니다.

아이디어는 정의 된 길이를 초과하는 텍스트를 삭제하는 것입니다.

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>