텍스트 영역의 문자 수를 세고 싶기 때문에 방금 만들었습니다.
<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");
}
});
답변
카운터가 필요할 때마다 사용되는 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));
}
});
답변
답변
글쎄, 이것은 말한 것과 크게 다르지 않지만 모든 브라우저에서 매우 잘 작동합니다.
아이디어는 정의 된 길이를 초과하는 텍스트를 삭제하는 것입니다.
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>