[JQUERY] 텍스트 영역의 문자 카운트
JQUERY텍스트 영역의 문자 카운트
해결법
-
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.캐 터햄의 기능을 기반으로 향상된 버전 :
캐 터햄의 기능을 기반으로 향상된 버전 :
$('#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.여기 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.<-> 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.이 나를 위해 벌금을했다.
이 나를 위해 벌금을했다.
$('#customText').on('keyup', function(event) { var len = $(this).val().length; if (len >= 40) { $(this).val($(this).val().substring(0, len-1)); } });
-
6.() 요구 하위 문자열 SUBSTR가되기 위해 ().
() 요구 하위 문자열 SUBSTR가되기 위해 ().
예 : jsfiddle.net/xqyWV
-
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.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.나는 위의 조합을했다. 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.나는이 작업을 위해 내 자신의 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.나는 이것이 내가 생각 해낸 것입니다이 같은 일을 수행하는 방법을 궁금해하고 모두 여기에서 아이디어를 복용했다 :
나는 이것이 내가 생각 해낸 것입니다이 같은 일을 수행하는 방법을 궁금해하고 모두 여기에서 아이디어를 복용했다 :
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.
$.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.
$(document).ready(function() { var count = $("h1").text().length; alert(count); });
또한, 텍스트 영역 문자열의 캐릭터를 계산 자신의 요소 ID 또는 대신 "H1"길이 이벤트의 클래스를 넣을 수 있습니다 ☻
-
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.이걸로 해봐.
이걸로 해봐.
<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.보다 일반 버전은 두 개 이상의 필드에 대한 기능을 사용할 수 있습니다.
보다 일반 버전은 두 개 이상의 필드에 대한 기능을 사용할 수 있습니다.
<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.
<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.내 예를 들어 여기. 만찬의 간단한 $ (문서) .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"> script> <텍스트 영역 ID = "my_textarea"클래스 = "영국 텍스트 영역"행 = "5"NAME = "텍스트"> 텍스트 영역>
0 H1>
내 예를 들어 여기. 만찬의 간단한 $ (문서) .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"> script> <텍스트 영역 ID = "my_textarea"클래스 = "영국 텍스트 영역"행 = "5"NAME = "텍스트"> 텍스트 영역>
0 H1>
-
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.
$('#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.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); } }); });
from https://stackoverflow.com/questions/5371089/count-characters-in-textarea by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] catch되지 않은 구문 에러 : JSON.parse 예기치 않은 토큰 (0) | 2020.10.21 |
---|---|
[JQUERY] 어떻게 플래시가 설치되어있는 경우 감지되지 않을 경우, 숨겨진 DIV 정보 용하는 사용자를 표시 할 수 있습니까? (0) | 2020.10.21 |
[JQUERY] JQuery와 동적으로 자바 스크립트 파일을로드 (0) | 2020.10.20 |
[JQUERY] 자바 스크립트 / jQuery를 함께 리디렉션에 POST 데이터를 전송? [복제] (0) | 2020.10.20 |
[JQUERY] 그것은 jQuery를 함께 인라인 스타일을 제거 할 수 있습니까? (0) | 2020.10.20 |