Jquery 就像推特上的人物倒计时一样

我怎样才能像使用jQuery在Twitter上那样进行“剩余字符”倒计时？

---

并将输入限制在文本区域。

我成功地使用了Aaron Russell的；不过，如果我写的话，我会设计得有点不同（自动创建计数器div，使用datamaxlength属性而不是plugin选项，等等）

简单用法：

$('#my_textarea').simplyCountable();

高级用法：

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});

---

制作一个

span

和

textarea

，并为它们提供唯一的选择器（使用ID或类），如下所示：

并在加载页面和更改消息时运行该函数：

jQuery(document).ready(function($) {
    updateCountdown();
    $('.message').change(updateCountdown);
    $('.message').keyup(updateCountdown);
});

---

和。jQuery使类似的事情变得非常简单。

我们最终开发了一个自定义的JS解决方案，该解决方案可以对类为“limited”的任何输入进行操作。它使用HTML5自定义数据属性（“data maxlength”）来指定长度。当然，这并不像Ryan提到的插件那样功能齐全。但是我们需要多个动态添加的计数器，而这个插件似乎不支持这些计数器。希望有帮助

function addCharacterCount(input) {
  var $input    = $(input),                                                                     
      maxLength = $input.data('maxlength'),
      remaining = maxLength - $input.val().length;                                              
  $('<label><input type="text" id="' + input.id + '-counter" size="3" value="' + remaining + '" /> Characters remaining (max ' + maxLength + ')</label>').insertAfter(input);
}

$('form .limited').each(function () {                                                           
  addCharacterCount(this);                                                                      
}); 

$('form .limited').live('keyup', function() {                                                   
  var $element = $(this),
      maxLength = $element.data('maxlength');
  $("#" + this.id + "-counter").val(maxLength - $element.val().length);
});

函数addCharacterCount（输入）{
变量$input=$（输入），
maxLength=$input.data（'maxLength'），
剩余=maxLength-$input.val（）.length；
$（'剩余字符（最大'+maxLength+'））。插入后面（输入）；
}
$（'form.limited'）。每个（函数（）{
addCharacterCount（此）；
}); 
$（'form.limited'）.live（'keyup'，function（）{
var$element=$（此），
maxLength=$element.data（'maxLength'）；
$（“#”+this.id+“-counter”）.val（maxLength-$element.val（）.length）；
});

使用jQuery、Mootools或类似工具完成如此简单的任务简直是自杀。。。除非你已经在用它们做别的事情了

简单javascript函数：

function limitTextCount(limitField_id, limitCount_id, limitNum)
{
    var limitField = document.getElementById(limitField_id);
    var limitCount = document.getElementById(limitCount_id);
    var fieldLEN = limitField.value.length;

    if (fieldLEN > limitNum)
    {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else
    {
        limitCount.innerHTML = (limitNum - fieldLEN) + ' charachter(s) to go.';
    }
}

function charactersRemaining(elementID, messageElementID, maxCharacters)
{
    var remaining = maxCharacters - $('#' + elementID).val().length;
    $('#' + messageElementID).text(remaining + ' characters remaining.');
}

第一个参数是输入/文本区域的id。 显示左侧字符的div的第二个-id。 第三是限制本身

和简单的HTML：

<input type="text" value="" name="title" id="title" maxlength="100" onkeyup="limitTextCount('title', 'divcount', 100);" onkeydown="limitTextCount('title', 'divcount', 100);">
<br>
<div id="divcount">100 charachter(s) to go..</div>

还有100个字符。。

使用jquery

将其另存为jquery.textlimiter.js

(function($) {
    $.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);
        }
    });
})(jQuery);

用法

<textarea id="text" maxlength="100" cols="50" rows="5" placeholder="Enter Text"></textarea>
    <div id="chars">100</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="path/to/jquery.textlimiter.js"></script>
<script>
$(document).ready( function() {
    var elem = $("#chars");
    $("#text").limiter(100, elem);
});
</script>

100
$（文档）.ready（函数（）{
var elem=$（“#chars”）；
$（“#文本”）。限制器（100，elem）；
});

我添加了一个简单的复数化函数，因为没有人喜欢糟糕的语法

function pluralize(count, word){
  if (count == 1 || count == -1){
    return String(count) + ' ' + word;
  }else{
    return String(count) + ' ' + word + 's';
  }
}

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('#micropost_content').val().length;
    jQuery('.countdown').text(pluralize(remaining,'character') + ' remaining');
}

...

---

我用maxlegth属性更新了@Brian McKenna版本中的多个textarea/textbox

演示

为更新计数生成两个函数

函数updateCountdownAll（）{
$（'.message'）。每个（函数（）{
更新计数（本）；
});
}
函数updateCountdown（e）{
无功电流元件；
如果（如目标）{
currentElement=e.target；
}
否则{
currentElement=e；
}
var maxLengh=$（currentElement）.attr（'maxlength'）；
var剩余=maxLengh-$（currentElement）.val（）.length；
$（currentElement）.nextAll（'.countdown:first'）.text（剩余+'个字符剩余'）；
}

HTML：

---

在我的实现中，我添加了以下JS函数：

function limitTextCount(limitField_id, limitCount_id, limitNum)
{
    var limitField = document.getElementById(limitField_id);
    var limitCount = document.getElementById(limitCount_id);
    var fieldLEN = limitField.value.length;

    if (fieldLEN > limitNum)
    {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else
    {
        limitCount.innerHTML = (limitNum - fieldLEN) + ' charachter(s) to go.';
    }
}

function charactersRemaining(elementID, messageElementID, maxCharacters)
{
    var remaining = maxCharacters - $('#' + elementID).val().length;
    $('#' + messageElementID).text(remaining + ' characters remaining.');
}

然后我可以在整个应用程序中重用该函数（例如，如果我有以下HTML）：

---

我认为插件的复制对它来说是一种过分的杀伤力。在jQuery中，任何东西都应该设计成一个插件，即使它是一个“微插件”（micro plugin）（）+1，jsbin的良好使用。如果所有示例都使用它，那就太好了。使用$（'.message'）.live（'input'，updateCountdown）比使用这两种方法要好。更改事件不会触发函数，直到您在框外单击或触发另一个事件。live on input将捕获文本字段上的任何事件。

.live（）

现在已被弃用，请使用

.on（）

附加事件处理程序：

$（'.message'）。on（'input'，function（）{…}）

我个人更喜欢从data-*而不是类名访问元素，因为后者似乎更简单。如果您在textarea上设置maxlength，函数将该值作为最大值而不是硬编码的140，那将是非常棒的。总是给作者评分-实际上我不记得从哪里得到的那一个。我已经在我的项目中使用了它。如果你已经在同一页面上以其他方式使用jQuery，它会自杀吗？我假设你只是说，在你不需要它的时候加载它是不好的。对，如果你已经在使用jQuery或类似的工具，那么就使用这种实现，否则就是自杀：-）我添加了一个简写if语句来支持剩余字符的单数和复数

<form>
    <!-- remember to markup your forms properly using labels! -->
    <label for="textareaChars">No more than 100 characters</label>

    <textarea id="textareaChars" maxlength="100"></textarea>

    <p><span id="chars">100</span> characters remaining</p>

</form>

$( document ).ready(function() {
    var maxLength = 100;
    $('textarea').keyup(function() {
        var length = $(this).val().length;
        var length = maxLength-length;
        $('#chars').text(length);
    });
});

function charactersRemaining(elementID, messageElementID, maxCharacters)
{
    var remaining = maxCharacters - $('#' + elementID).val().length;
    $('#' + messageElementID).text(remaining + ' characters remaining.');
}

<textarea class="form-control" asp-for="Comments" rows="3"></textarea>
<span id="commentsCharsRemaining" class="text-primary"></span>

$('#Comments').change(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});
$('#Comments').keyup(function () {
    charactersRemaining('Comments', 'commentsCharsRemaining', 2000)
});