目前,我正在尝试在 Twitter 文本区域上创建基本相同类型的倒计时。它确实适用于第一个文本区域,但当我开始在第一个文本区域中输入时,它会复制所有帖子剩余的相同数量的字符。
我需要知道的是如何获取仅当前文本区域剩余的字符?
HTML:
<textarea name="comment" class="inputField newComment">@'.$post['username']." ".'</textarea>
<span class="countdown"></span>
jQuery:
function updateCountdown() {
var remaining = 140 - $('.newComment').val().length;
$('.countdown').text(remaining + ' characters remaining');
if(remaining < 0){
$(this).siblings('.postComment').hide(500);
}else{
$(this).siblings('.postComment').show(500);
if(remaining <= 10){
$(this).siblings('.countdown').css("color","red");
}else{
$(this).siblings('.countdown').css("color","black");
}
}
}
$('.newComment').change(updateCountdown);
$('.newComment').keyup(updateCountdown);
最佳答案
尝试这样的事情,
HTML
<textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>
<textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>
JS
$(document).ready(function () {
$('textarea').on("propertychange keyup input paste",
function () {
var limit = $(this).data("limit");
var remainingChars = limit - $(this).val().length;
if (remainingChars <= 0) {
$(this).val($(this).val().substring(0, limit));
}
$(this).next('span').text(remainingChars<=0?0:remainingChars);
});
});
关于javascript - 同一页面上多个文本区域的字符限制倒计时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19325334/