programing

텍스트 영역의 문자 수

closeapi 2023. 8. 19. 10:19
반응형

텍스트 영역의 문자 수

텍스트 영역에서 문자 수를 세고 싶어서 다음을 만들었습니다.

<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);
     }
};

내 코드에 무슨 문제가 있습니까?그것은 작동하지 않습니다!음, 그건 초보자 글씨였어요. 도움이 필요해요.

브라우저에 어떤 오류가 표시됩니까?당신이 올린 글이 불완전했다면 당신의 코드가 작동하지 않는 이유를 이해할 수 있지만, 확실하게 알 수 없다는 것을 알지 못합니다.

한도를 초과하면 charNumdiv를 지우거나 무언가를 작성해야 합니다.

function countChar(val) {
  var len = val.value.length;
  if (len >= 500) {
    val.value = val.value.substring(0, 500);
  } else {
    $('#charNum').text(500 - len);
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>

⚠️ 수용된 솔루션에 결함이 있습니다.

여기 두 가지 시나리오가 있습니다.keyup이벤트가 발생하지 않음:

  1. 사용자가 텍스트를 텍스트 영역으로 끕니다.
  2. 사용자가 마우스 오른쪽 단추를 눌러 텍스트 영역에 텍스트를 복사하여 붙여넣습니다(상황에 맞는 메뉴).

HTML5 사용input이벤트 대신 보다 강력한 솔루션을 제공합니다.

JavaScript(데모):

const textarea = document.querySelector("textarea");

textarea.addEventListener("input", ({ currentTarget: target }) => {
  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`);
});
<textarea maxlength='140'></textarea>

jQuery를 사용하려면 다음을 수행합니다.

$('textarea').on("input", function() {
  var maxlength = $(this).attr("maxlength");
  var currentLength = $(this).val().length;

  if (currentLength >= maxlength) {
    return console.log("You have reached the maximum number of characters.");
  }

  console.log(maxlength - currentLength + " chars left");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea maxlength='140'></textarea>

캐터햄의 기능을 기반으로 한 개선된 버전:

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

카운터가 필요한 곳 어디에서나 사용되는 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>내 템플릿 파일에서 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

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);
    });
});

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

이 방법은 정의된 길이를 초과하는 텍스트를 삭제하는 것입니다.

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>

저는 위의 것들을 조합해서 했습니다.텍스트 입력을 중지하고 백스페이스를 사용할 수 있으며 백스페이스 중에서도 카운트를 유지할 수 있습니다.

JavaScript 코드:

$(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>

내 앞에 있는 그 포스터들에 대한 공로를 인정합니다.이것이 누군가에게 도움이 되기를 바랍니다!

이 작업을 위해 직접 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);

저는 이와 같은 방법을 고민하고 있었고, 여기 있는 모든 사람들로부터 아이디어를 얻었습니다. 이것이 제가 생각해낸 것입니다.

제이에스피들

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

$.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);

가장 재사용 가능하고 우아한 솔루션이 위의 내용을 결합하여 입력 속성에서 MaxLength를 가져온 다음 예측 가능한 ID로 Span 요소를 참조하는 것 같습니다.

그런 다음 '.countit'을 입력 클래스에 추가하고 'counter_' + [input-ID]를 스팬에 추가하기만 하면 됩니다.

HTML

<textarea class="countit" name="name" maxlength='6' id="post"></textarea>
<span>characters remaining: <span id="counter_name"></span></span>
<br>
<textarea class="countit" name="post" maxlength='20' id="post"></textarea>
<span>characters remaining: <span id="counter_post"></span></span>
<br>
<textarea class="countit" name="desc" maxlength='10' id="desc"></textarea>
<span>characters remaining: <span id="counter_desc"></span></span>

제이쿼리

$(".countit").keyup(function () {
  var maxlength = $(this).attr("maxlength");
  var currentLength = $(this).val().length;

  if( currentLength >= maxlength ){
    $("#counter_" + $(this).attr("id")).html(currentLength + ' / ' + maxlength);
    }else{
    $("#counter_" + $(this).attr("id")).html(maxlength - currentLength + " chars left");
  }
});

이거 드셔보세요.

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

둘 이상의 필드에 대해 함수를 사용할 수 있는 보다 일반적인 버전입니다.

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

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

다음을 사용하여 다른 사용을 건너뛰고 음수 카운트를 가져오지 않습니다.

여기 제 예가 있습니다.저녁식사는 간단하다.

$(document).ready(function() {
      
        var textarea    = $("#my_textarea");
  
        textarea.keydown(function(event) {
          
            var numbOfchars = textarea.val();
            var len = numbOfchars.length;
            $(".chars-counter").text(len);

        });
  
  
 }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="my_textarea" class="uk-textarea" rows="5" name="text"></textarea>
<h1 class="chars-counter">0</h1>

우리는 어떤 목적을 가진 해결책에도 만족하지 못했습니다.

그래서 우리는 JQuery를 위한 완벽한 char 카운터 솔루션을 만들었습니다. jquery-jedable 위에 구축되었습니다.그것은textarea플러그인 확장 기능은 양방향으로 계산할 수 있으며 사용자 지정 메시지를 표시하고 문자 수를 제한하며 jquery-data 테이블도 지원합니다.

JSFidle에서 바로 테스트할 수 있습니다.

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();

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

또한 "h1" 대신 자신의 요소 ID 또는 클래스를 입력할 수 있으며 길이 이벤트는 텍스트 영역 문자열의 문자 수 »

에엔마말명심하세요을틴의티요▁use세▁keeping명하심을 사용하면 됩니다.oninput텍스트 영역 내의 모든 변화를 감지하기 때문입니다.텍스트를 복사하여 붙여넣을 경우 탐지합니다.

$('#textarea').on('input', function() {
        var max = 400;
        var len = $(this).val().length;
        var char = max - len;
        if (len >= max) {
            $('#charNum').text(' You have reached the character limit.');
            $('#charNum').addClass("text-danger"); // optional, adding a class using bootstrap
        } else if (char <= 10) {
            $('#charNum').text(char + ' You are reaching the character limit.');
            $('#charNum').addClass("text-warning"); // optional, adding a class using bootstrap
        } else {
            var char = max - len;
            $('#charNum').text(char + ' characters remaining.');
            $('#charNum').addClass("text-success"); // optional, adding a class using bootstrap
        }
        });

마이웨이 :) #summary-field" - 필드, #summary-count - 라이브 캐릭터 카운터

텍스트 영역의 입력을 건너뛰는 데 유용합니다.

function fieldCharactersRestriction(){
    if ($("#summary-field").val().replace(/(\r\n|\n|\r)/gm, "").length <= maxLength){
      summaryCharactersCount = maxLength - $("#summary-field").val().replace(/(\r\n|\n|\r)/gm, "").length;
      $("#summary-count").html(summaryCharactersCount + ' characters left');
    } else {
      $("#summary-field").val($("#summary-field").val().slice(0, -1));
    }
  }

여기서 나는 그것을 꽤 컴팩트하게 만들었습니다. 그것은 내가 어떤 버튼이든 다시 활성화시키는 데 효과가 있었습니다.

 var x = document.getElementById("password");
 
 x.addEventListener("input" , event =>{
 
      var target = event.currentTarget;
      var maxlength = target.getAttribute("maxlength");
      //current length 
      var clength = target.value.length;
      //checking if length is 10 or not
       if(clength == 10 ){
       //enabling the button
           var btn = document.getElementById("btn");
           btn.disabled = false;
      }
      //printing the current values
      document.getElementById("return") .innerText = clength;
 });
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
   
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      
    <textarea maxlength="10" id="password"  required  > </textarea> 
    <button id="btn" disabled> submit </button>
      <div id="return"></div>
    <script src="script.js"></script>
  </body>
</html>

당신의 코드가 약간 혼동되었습니다.다음은 깨끗한 버전입니다.

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

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

각도를 사용하는 경우:

<textarea [(ngModel)]="xyz" maxlength="50"></textarea>
{{xyz.length}}/50

사용할 수 있는 항목:

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

언급URL : https://stackoverflow.com/questions/5371089/count-characters-in-textarea

반응형

'programing' 카테고리의 다른 글

jQuery를 사용하여 요소 ID가 특정 텍스트를 포함하는 페이지의 모든 요소 찾기  (0) 2023.08.19
CSS 오버플로 - 텍스트 한 줄만  (0) 2023.08.19
c.의 EOF의 아스키 값은 얼마입니까?  (0) 2023.08.19
EF 예외:문자열 또는 이진 데이터가 잘립니다.문이 종료되었습니다.?  (0) 2023.08.19
파워셸에서 지능을 얻을 수 있습니까?  (0) 2023.08.19

'programing'의 다른글

  • 현재글텍스트 영역의 문자 수

관련글

댓글

티스토리툴바