像twitter上的字符倒计时
如何使用jQuery在Twitter上创build“剩余字符”倒计时？ 并限制input到textarea。
做一个span和textarea并给他们独特的select器（使用ID或类），如下所示：
<textarea class="message" rows="2" cols="30"></textarea> <span class="countdown"></span>
然后做一个更新function，如下所示：
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使这样的事情变得非常简单。
我用Aaron Russell的简单可数jQuery插件成功了; 不过，如果我已经写了它，我会devise它有点不同（自动计数器div创build，使用data-maxlength属性，而不是插件选项等）。
简单的用法：
$('#my_textarea').simplyCountable();
高级用法：
$('#my_textarea').simplyCountable({ counter: '#counter', countable: 'characters', maxCount: 140, strictMax: false, countDirection: 'down', safeClass: 'safe', overClass: 'over', thousandSeparator: ',' });
使用jQuery，Mootools或类似的工具来执行这个简单的任务是一种自杀行为，除非你已经在使用它们来做别的事情了。
简单的JavaScriptfunction：
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.'; } }
第一个参数是input / 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>
我添加了一个简单的复数函数，没有人喜欢糟糕的语法。
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'); } ...
我们最终做了一个自定义的JS解决scheme，对类“有限”的任何input进行操作。 它使用HTML5自定义数据属性（“data-maxlength”）来指定长度。 当然，这还不如Ryan的插件提供的全function。 但是我们需要多个dynamic添加的计数器，而这些计数器似乎并没有被插件所支持。 希望有所帮助。
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); });
我更新@Brian McKenna版本的多个textarea /文本框与maxlegth属性。
在这里演示
<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。
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.'); }
使用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>
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); }); });
在我的实现中，我添加了下面的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) });
