使用jquery或其他工具倒计时textarea中的可用空间？
我在我的网站上有几个区域，我需要将文本输入限制在X个字符的范围内，并且在用户输入时显示一些剩余的空格，这很好，就像twitter一样 我找到了这个jquery插件； 它正是我所需要的，但似乎有点过分，我不确定文件大小，但对于这样一个简单的任务，它看起来有很多代码行，你认为使用非jquery方法会更好吗？我之所以认为jquery是一种发展方向，是因为jquery已经包含在我的所有页面中 更新 我刚刚发现这个非jquery方法做的事情完全一样，就是占用更少的空间，那么这是更好的方法吗使用jquery或其他工具倒计时textarea中的可用空间？,jquery,text,max,Jquery,Text,Max,我在我的网站上有几个区域，我需要将文本输入限制在X个字符的范围内，并且在用户输入时显示一些剩余的空格，这很好，就像twitter一样 我找到了这个jquery插件； 它正是我所需要的，但似乎有点过分，我不确定文件大小，但对于这样一个简单的任务，它看起来有很多代码行，你认为使用非jquery方法会更好吗？我之所以认为jquery是一种发展方向，是因为jquery已经包含在我的所有页面中 更新 我刚刚发现这个非jquery方法做的事情完全一样，就是占用更少的空间，那么这是更好的方法吗 <sc
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
You have
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.
函数limitText（limitField、limitCount、limitNum）{
如果（limitField.value.length>limitNum）{
limitField.value=limitField.value.substring（0，limitNum）；
}否则{
limitCount.value=limitNum-limitField.value.length；
}
}
你有
剩下的字符。
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');
});
<textarea id="myTextarea"></textarea>
<p id="counter"></p>
<script type="text/javascript">
$('#myTextarea').keyup(function () {
var left = 200 - $(this).val().length;
if (left < 0) {
left = 0;
}
$('#counter').text('Characters left: ' + left);
});
</script>
$（'#myTextarea'）.keyup（函数（）{
var left=200-$（this）.val（）.length；
if（左<0）{
左=0；
}
$（“#计数器”）.text（'左字符：'+左字符）；
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#TestId').keyup(function(e)
{
var maxLength = 100;
var textlength = this.value.length;
if (textlength >= maxLength)
{
$('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
this.value = this.value.substring(0, maxLength);
e.preventDefault();
}
else
{
$('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
}
});
});
</script>
</head>
<body>
<textarea id="TestId" cols="20" rows="8"></textarea><br />
(Maximum characters: 100)<br />
<span id="charStatus"></span>
</body>
</html>
$（函数（）
{
$（'#TestId'）.keyup（函数（e）
{
var maxLength=100；
var textlength=this.value.length；
如果（textlength>=maxLength）
{
$（'#charStatus'）.html（'不能写超过'+maxLength+'个字符！'）；
this.value=this.value.substring（0，maxLength）；
e、 预防默认值（）；
}
其他的
{
$（'#charStatus'）.html（'您还有'+（maxLength-textlength）+'个字符'）；
}
});
});
（最大字符数：100）
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();
});
};
我成功地使用了亚伦·拉塞尔的 简单用法：
$('#my_textarea').simplyCountable();
$('#my_textarea').simplyCountable({
counter: '#counter',
countable: 'characters',
maxCount: 140,
strictMax: false,
countDirection: 'down',
safeClass: 'safe',
overClass: 'over',
thousandSeparator: ','
});
有时，您需要有多个文本区域，并希望它们单独寻址，而无需为每个区域编写代码。这段代码动态地将剩余的字符添加到任何具有maxLength属性的字符中
<script type="text/javascript">
$(document).ready(function(){
$('textarea[maxLength]').each(function(){
var tId=$(this).attr("id");
$(this).after('<br><span id="cnt'+tId+'"></span>');
$(this).keyup(function () {
var tId=$(this).attr("id");
var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
var left = tMax - $(this).val().length;
if (left < 0) left = 0;
$('#cnt'+tId).text('Characters left: ' + left);
}).keyup();
});
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>
$（文档）.ready（函数（）{
$（'textarea[maxLength]'）。每个（函数（）{
var tId=$（this.attr（“id”）；
$（this）.after（“
”）；
$（此）.keyup（函数（）{
var tId=$（this.attr（“id”）；
var tMax=$（this）.attr（“maxLength”）；//与HTML输入maxLength不同，区分大小写
var left=tMax-$（this）.val（）.length；
如果（左<0）左=0；
$（'#cnt'+tId）.text（'左字符：'+左字符）；
}).keyup（）；
});
});
初始文本lorem ipsum blah blah blah
- 始终显示，而不仅仅是在用户开始键入时显示
- 超过限制时显示负数，并且
- 当文本超过限制时，添加类-为文本着色（当然，这需要额外的css）
$（文档）.ready（函数（）{ 左变量=200 $（“#字段_计数器”）.text（'左字符：'+左字符）； $（'#id_description'）.keyup（函数（）{ 左=200-$（此）.val（）长度； if（左<0）{ $（“#字段_计数器”）.addClass（“超限”）； } 如果（左>=0）{ $（'#字段\计数器span'）。removeClass（“超限”）； } $（“#字段_计数器”）.text（'左字符：'+左字符）； }); });
var max=140；
$（“#spn”）.html（最大值+剩余值）；
$（“#textarea”）.keyup（函数（）{
var lenght1=$（“#textarea”）.val（）.length；
剩余var=最大长度1；
$（“#spn”）.html（剩余+“剩余”）；
如果（剩余<0）{$（“#spn”）.css（'opacity'，'0.4'）.css（'color'，'red'）；$（“#comment”）.attr（'disabled'，'disabled'）；}其他{$（“#spn”）.css（'opacity'，'1'）.css（'color'，'black'）；$（'comment”）.removeAttr（'disabled'）；}
如果（剩余<10）{$（“#spn”）.css（'color'，'red'）；}其他{$（“#spn”）.css（'color'，'black'）；}
});
我在这里提供的解决方案的基础上构建了下面的代码，它解释了新行
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;
}
函数
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'); }
});
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;
}