使用jquery或其他的textarea倒计时可用空间？
我在我的网站上有一些区域，我需要将文本输入限制为X个字符数量，并且在用户输入时显示剩余的空格很好，比如twitter。
我找到了这个jquery插件; jquery max-length插件
它只是我需要的东西，但它似乎有点像矫枉过正，我不确定文件大小但它看起来像这么简单的任务的很多行代码，你认为我会更好地使用非jquery方法？ 我之所以考虑jquery，是因为jquery已经包含在我的所有页面UPDATE中;
我刚刚发现这种非jquery方法完全相同的方法是占用更小的空间，所以这是更好的方法吗？
function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } You have characters left. 在jQuery中非常简单：
无论你的限制是什么，都要用200代替。
请注意，这并不限制实际的文本输入，它只是倒计时。 您需要检查服务器端的输入长度，这只是一个可视帮助器。
顺便说一句，我认为你甚至不应该试图通过在达到限制时拒绝任何输入来限制输入长度。 这是后方可用性方面的痛苦，无论如何都无法依赖。 简单的倒计时和服务器端检查是最好的选择恕我直言。
有时您需要有多个文本区域并希望它们单独处理，而无需为每个区域编写代码。 此代码动态地将剩余的字符添加到任何具有maxLength属性的字符…
我已经成功地使用了Aaron Russell 简单可数的jQuery插件
简单用法：
$('#my_textarea').simplyCountable();
高级用法：
$('#my_textarea').simplyCountable({ counter: '#counter', countable: 'characters', maxCount: 140, strictMax: false, countDirection: 'down', safeClass: 'safe', overClass: 'over', thousandSeparator: ',' });
(Maximum characters: 100)
var max = 140; $("#spn").html(max+" Remaining"); $("#textarea").keyup(function () { var lenght1 = $("#textarea").val().length; var remaining = max - lenght1; $("#spn").html(remaining + " Remaining"); if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); } if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); } });
我使用jQuery和deceze的答案 ，然后调整它给我一个推特式的倒计时，以便用户可以看到他们已经过了多少并相应地调整他们的文本。 我也把它放到它自己的函数中，所以我可以从另一个函数调用它，有时自动填充textarea：
function reCalcToText() { var left = 200 - $('.toText').val().length; if (left < 0) { $('#counter').text(left); $('#counter').addClass("excess"); } else { $('#counter').text(left); $('#counter').removeClass(); } } function onReady() { $('#<%= toText.ClientID %>').keyup(function() { reCalcToText(); }); };
所以我拿了@deceze版本并添加了一些技巧来实现它：
- 始终显示，而不仅仅是在用户开始输入时，
- 当限制结束时显示减去，和
-
添加类 – 为文本着色 – 当它超过限制时（当然需要额外的css）
$(document).ready(function(){ var left = 200 $('#field_counter').text('Characters left: ' + left); $('#id_description').keyup(function () { left = 200 - $(this).val().length; if(left < 0){ $('#field_counter').addClass("overlimit"); } if(left >= 0){ $('#field_counter span').removeClass("overlimit"); } $('#field_counter').text('Characters left: ' + left); }); });
对于任何需要和我一样的人:)
使用jQuery，假设您有一个带有id 字段的textarea，您希望限制为100个字符，另一个具有id chars-remaining的元素，以显示可用字符数：
var max = 100; $('#field').keyup(function() { if($(this).val().length > max) { $(this).val($(this).val().substr(0, max)); } $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining'); });
请记住，您必须考虑NewLines为2个字符。
我在此处提供的解决方案的基础上构建了以下代码，用于说明新行。
function DisplayCharactersLeft(idOfInputControl) { var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength"); $("#" + idOfInputControl).on("input", function () { var currentText = $(this).val(); var numberOfNewLines = GetNumberOfNewLines(currentText); var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines); if (left < 0) { left = 0; } $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left); }); } function GetNumberOfNewLines(text) { var newLines = text.match(/(\r\n|\n|\r)/g); var numberOfNewLines = 0; if (newLines != null) { numberOfNewLines = newLines.length; } return numberOfNewLines; }