Kyl*_*yle 110 jquery counter textarea onkeyup
我想计算textarea中的字符,所以我只是做了:
<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);
}
};
我的代码有什么问题？这是行不通的!好吧,这是一个新手笔迹,需要帮助.
Cat*_*ham 162
你在浏览器中看到了什么错误？我可以理解为什么你的代码不起作用,如果你发布的内容不完整,但不知道我不能确定.
<!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,或者写一些东西,如果超过限制.
kei*_*ics 81
基于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');
}
});
Eti*_*tin 60
以下是两种keyup不会触发事件的方案:
使用HTML5 input事件代替更强大的解决方案:
<textarea maxlength='140'></textarea>
JavaScript(演示):
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");
}
});
小智 9
HTML示例,在需要计数器的任何地方使用,请注意textarea和第二个跨度的ID的相关性:id="post"< - > id="rem_post"以及包含每个特定textarea所需字符数量的跨度的标题
<textarea class="countit" name="post" id="post"></textarea>
<p>
<span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>
JavaScript函数通常放在</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);
});
小智 9
这对我来说很好.
$('#customText').on('keyup', function(event) {
var len = $(this).val().length;
if (len >= 40) {
$(this).val($(this).val().substring(0, len-1));
}
});
小智 5
超文本标记语言
<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);
});
});
| 归档时间： |
|
| 查看次数： |
269034 次 |
| 最近记录： |