반응형
텍스트 영역의 문자 계산
텍스트 영역의 문자 수를 세고 싶기 때문에 방금 만들었습니다.
<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이벤트가 시작되지 않는 두 가지 시나리오입니다 .
- 사용자가 텍스트를 텍스트 영역으로 드래그합니다.
- 사용자는 마우스 오른쪽 버튼을 클릭하여 텍스트 영역에 텍스트를 복사하여 붙여 넣습니다 (컨텍스트 메뉴).
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");
}
});
이것은 나를 위해 잘 작동했습니다.
$('#customText').on('keyup', function(event) {
var len = $(this).val().length;
if (len >= 40) {
$(this).val($(this).val().substring(0, len-1));
}
});
카운터가 필요할 때마다 사용되는 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);
});
substring()될 필요가 substr()있습니다.
글쎄, 이것은 말한 것과 크게 다르지 않지만 모든 브라우저에서 잘 작동합니다.
아이디어는 정의 된 길이를 초과하는 텍스트를 삭제하는 것입니다.
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>
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);
});
});
나는 위의 조합을했다. 텍스트 입력을 중지 할 수 있고 백 스페이스를 허용하고 백 스페이스 일 때도 카운트를 유지합니다.
자바 스크립트 코드 :
$(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);
$.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);
나는이 같은 일을하는 방법을 궁금해하고 여기에있는 모든 사람들로부터 아이디어를 얻는 것이 내가 생각 해낸 것입니다.
<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');
}
});
귀하의 코드가 약간 혼동되었습니다. 다음은 깨끗한 버전입니다.
<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>
이거 한번 해봐.
<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>
다음을 사용하여 else 사용을 건너 뛰고 음수 계산도 건너 뜁니다.
여기 내 예. 간단한 만찬
$(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-jeditable 위에 구축 된 JQuery를위한 완전한 char counter 솔루션을 만들었습니다 . textarea두 가지 방법으로 계산할 수 있고, 사용자 지정 메시지를 표시하고, 문자 수를 제한하고, 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();
$(document).ready(function() {
var count = $("h1").text().length;
alert(count);
});
또한 "h1"대신 고유 한 요소 ID 또는 클래스를 입력하고 길이 이벤트는 텍스트 영역 문자열 ☻의 문자를 계산할 수 있습니다.
$('#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);
}
});
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);
}
});
});
참고 URL : https://stackoverflow.com/questions/5371089/count-characters-in-textarea
반응형
'program story' 카테고리의 다른 글
| 이미 컴파일 된 APK에 서명하는 방법 (0) | 2020.08.08 |
|---|---|
| JQuery를 사용하여 추가 할 HTML 템플릿 정의 (0) | 2020.08.08 |
| Android-부팅시 서비스 시작 (0) | 2020.08.08 |
| Android : 새 버전의 gradle로 업데이트 한 후 "Manifest merger failed"오류가 발생 함 (0) | 2020.08.08 |
| 문자열 끝에서 쉼표를 제거하려면 어떻게합니까? (0) | 2020.08.08 |