如何使用jQuery在Twitter上制作“剩余角色”倒计时？ 并且还将输入限制为textarea。
答案 0 :(得分：83)
制作span和textarea并为其提供唯一的选择器（使用ID或类），如下所示：
<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);
});
Visit an example和view the source。 jQuery使这样的事情非常简单。
答案 1 :(得分：17)
我成功地使用了Aaron Russell的 simply countable jQuery plugin ;但是，如果我要编写它，我会设计它有点不同（自动计数器div创建，使用data-maxlength属性而不是插件选项等）。
简单用法：
$('#my_textarea').simplyCountable();
高级用法：
$('#my_textarea').simplyCountable({
counter: '#counter',
countable: 'characters',
maxCount: 140,
strictMax: false,
countDirection: 'down',
safeClass: 'safe',
overClass: 'over',
thousandSeparator: ','
});
答案 2 :(得分：8)
使用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.';
}
}
第一个参数是输入/ textarea的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>
答案 3 :(得分：4)
我添加了一个简单的复数函数，cus没人喜欢错误的语法。
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');
}
...
答案 4 :(得分：3)
我们最终做了一个自定义JS解决方案，可以对任何类“限制”的输入进行操作。它使用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);
});
答案 5 :(得分：1)
我使用maxlegth属性为多个textarea / textbox更新了@Brian McKenna版本。
演示here
<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.');
}
答案 6 :(得分：1)
在我的实现中，我添加了以下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)
});
答案 7 :(得分：0)
使用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>
答案 8 :(得分：0)
<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);
});
});