类似Twitter的字符倒计时

Question

我该如何使用jQuery创建类似Twitter "剩余字符" 的倒数计时器？同时还需要将输入限制在文本区域内。

- argon

---

这是需要翻译的内容：Duplicate of https://dev59.com/LnM_5IYBdhLWcg3wvF3J这是翻译的结果：复制自https://dev59.com/LnM_5IYBdhLWcg3wvF3J - adrianbanks

Answer 1

创建一个 span 和 textarea 并为它们分别设置唯一的选择器（使用 ID 或 class），例如：

```html ```

<textarea class="message" rows="2" cols="30"></textarea>
<span class="countdown"></span>

然后创建一个更新函数，如下所示：

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

并使该函数在页面加载时运行，以及在消息更改时运行：

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

访问一个示例并查看源代码。jQuery使这样的事情变得非常简单。

- Brian McKenna

---

+1，很好地使用了jsbin。如果所有的例子都使用它会更好。 - Corey Ballou

最好使用$('.message').live('input', updateCountdown)而不是那两种方法。change事件只有在单击文本框外部或触发其他事件后才会触发该函数。在输入时使用live将捕获文本字段上的任何事件。 - Nathan Wallace

.live() 已被弃用，请使用 .on() 来绑定事件处理程序：$('.message').on('input', function() {...})。 - Quentin

个人而言，我更喜欢从 data-* 中访问元素，而不是从类名中访问，因为后者似乎更加脆弱。 - Neil

jsbin不再可用，我创建了一个jsfiddle https://jsfiddle.net/f81jq0hn/ - FullStack

Answer 2

我成功地使用了Aaron Russell的 simply countable jQuery插件，虽然如果我是作者的话，我会稍微改进一下（自动计数器div的创建，使用"data-maxlength"属性代替插件选项等）。

简单用法：

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

高级用法：

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

- Ryan McGeary

---

我认为插件有些过头了。 - bodacydo

在jQuery中，所有的东西都应该被设计成插件，即使它是一个“微型插件”（http://www.thegarvin.com/2009/10/28/clearer-code-with-jquery-micro-plugins.html）。 - Ryan McGeary

Answer 3

对于这样简单的任务，使用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.';
    }
}

第一个参数是输入框/文本框的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>

- Nikolay Ivanov

---

如果在同一页上已经以其他方式使用了jQuery，那么加载它是否会自取灭亡？我猜你的意思是当你不需要它时加载它是不好的。 - toobulkeh

如果你已经在使用jQuery或类似的东西，就采用这种实现方式吧，否则就是自杀 :-) - Nikolay Ivanov

Answer 4

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

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');
}

...

- dstandish

Answer 5

我更新了@Brian McKenna的版本，以支持带有maxlength属性的多个文本区域/文本框。

演示在这里

<textarea class="message" rows="2" cols="30" maxlength="60"></textarea>
<span class="countdown"></span>

<textarea class="message" rows="2" cols="30"  maxlength="100"></textarea>
<span class="countdown"></span>

页面加载时更新所有计数。

jQuery(document).ready(function($) {
    updateCountdownAll();
    $('.message').live('input', updateCountdown);

});

创建两个函数用于更新计数。

function updateCountdownAll() {
        $('.message').each(function () {
            updateCountdown(this);
        });
    }

    function updateCountdown(e) {

        var currentElement;
        if (e.target) {
            currentElement = e.target;
        }
        else {
            currentElement = e;
        }

        var maxLengh = $(currentElement).attr('maxlength');
        var remaining = maxLengh - $(currentElement).val().length;
        $(currentElement).nextAll('.countdown:first').text(remaining + ' character(s) remaining.');
    }

- Rikin Patel

---

我添加了一个简写的if语句，以支持剩余字符数量的单数和复数。 - Ogier Schelvis

Answer 6

我们最终采用了一种自定义的JS解决方案，它可以操作任何带有"class = 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);
});

- Mat Schaffer

Answer 7

HTML：

<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>

JS：

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

- Rhonda Te Moananui

Answer 8

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

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

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

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

只需添加这两个 jQuery 语句即可使其工作：

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

- Brian Edwards

Answer 9

使用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>

- Sujay sreedhar

---

始终给予作者信用- http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/ - NLV

其实我不记得我从哪里得到那个了。我已经在我的项目中使用它了。 - Sujay sreedhar