文本区域字符限制
Posted
技术标签:
【中文标题】文本区域字符限制【英文标题】：textarea character limit 【发布时间】：2011-07-28 19:56:18 【问题描述】：我希望能够限制文本区域中的字符数。我使用的方法在 Google Chrome 中效果很好，但在 Firefox 中速度很慢，并且在 IE 中不起作用。
function len()
t_v=textarea.value;
if(t_v.length>180)
long_post_container.innerhtml=long_post;
post_button.className=post_button.className.replace('post_it_regular','post_it_disabled');
post_button.disabled=true;
else
long_post_container.innerHTML="";
post_button.className=post_button.className.replace('post_it_disabled','post_it_regular');
post_button.disabled=false;
if(t_v.length>186)
t_v=t_v.substring(0,186);
HTML：
<textarea id="user_post_textarea" name="user_post_textarea" cols="28" rows="1" onkeypress="len();" onkeyup="len();"></textarea>
正文元素底部的Javascript：
textarea=document.getElementById('user_post_textarea');
【问题讨论】：
还有...？这个问题连代码都看不到怎么回答？ 请更新您的问题并提供更多详细信息 另外，如果你不想让别人笑话你，就不要把“html5”和“浏览器兼容性”放在同一个句子里.. 【参考方案1】：我找到了一个很好的解决方案，如果浏览器支持它，它使用 maxlength 属性，并且在不支持的浏览器中回退到一个不显眼的 javascript pollyfill。
感谢@Dan Tello's comment 我修复了它，使其在 IE7+ 中也能正常工作：
HTML：
<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>
Javascript：
function maxLength(el)
if (!('maxLength' in el))
var max = el.attributes.maxLength.value;
el.onkeypress = function ()
if (this.value.length >= max) return false;
;
maxLength(document.getElementById("text"));
Demo
在 HTML5 中有 no such thing 作为 minlength 属性。
对于以下输入类型：number、range、date、datetime、datetime-local、month、time 和 week（其中aren't fully supported yet）使用@9876543 max 属性。
【讨论】：
你编辑的方法似乎在 IE 7 + 8 中被破坏了。不过第一个似乎有效。 @DanTello 带有新演示的新代码。适用于 IE7+ 和其他浏览器。还没有签入IE6-. 不工作，即“'in'的操作数无效：预期对象” @Nileshpatel 我已经在 IE7+ 中测试了我的演示（这是用于 IE 测试的 fullscreen version），控制台中没有错误，并且字符限制正常工作。 问题是：如果你遇到限制，它不再接受 any 按键，所以你甚至不能退格最后一句话。您必须使用上下文菜单来删除某些内容。【参考方案2】：这完全未经测试，但它应该可以满足您的需求。
更新：这里有一个 jsfiddle 来看看。似乎正在工作。 link
您可以将它粘贴到一个 js 文件中，并在您的 jquery 引用之后引用它。 然后你会这样称呼它..
$("textarea").characterCounter(200);
对发生的事情的简要说明..
在每个 keyup 事件中，该函数都会检查按下的是什么类型的键。如果可以接受，计数器将检查计数，修剪任何多余的并在达到限制后阻止任何进一步的输入。
插件也应该处理粘贴到目标中。
; (function ($)
$.fn.characterCounter = function (limit)
return this.filter("textarea, input:text").each(function ()
var $this = $(this),
checkCharacters = function (event)
if ($this.val().length > limit)
// Trim the string as paste would allow you to make it
// more than the limit.
$this.val($this.val().substring(0, limit))
// Cancel the original event
event.preventDefault();
event.stopPropagation();
;
$this.keyup(function (event)
// Keys "enumeration"
var keys =
BACKSPACE: 8,
TAB: 9,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
;
// which normalizes keycode and charcode.
switch (event.which)
case keys.UP:
case keys.DOWN:
case keys.LEFT:
case keys.RIGHT:
case keys.TAB:
break;
default:
checkCharacters(event);
break;
);
// Handle cut/paste.
$this.bind("paste cut", function (event)
// Delay so that paste value is captured.
setTimeout(function () checkCharacters(event); event = null; , 150);
);
);
;
(jQuery));
【讨论】：
在您的示例中，当按住某个键时，textarea 不会修剪字符数，直到该键被释放。我想要像@webarto 这样的东西，但这会过滤掉 [DEL] 和 [BACKSPACE]。 您的示例允许在半秒后删除该字符之前放置另一个字符，但这并不是我真正想要的。我编辑了@Christian Sciberras 提供的答案以过滤必要的键码，效果很好！ @inquisitive：这可以通过将 if ($this.val().length > limit) 更改为 ($this.val().length >= limit) 的行轻松解决.我希望上帝你没有像 Christian 的例子那样内联编写它，并且至少将它移动到一个单独的 js 文件中。【参考方案3】：使用 textarea 的 maxlength 属性可以解决问题……简单的 html 代码……不是 JS 或 JQuery 或需要服务器端检查……
【讨论】：
旧版浏览器不支持 maxlength。对于 IE，它必须是版本 10。【参考方案4】：这适用于 keyup 和 paste，当您几乎达到限制时它将文本着色为红色，当您超过时将其截断并提醒您编辑您的文本，您可以这样做。
var t2= /* 文本区域引用*/
t2.onkeyup= t2.onpaste= function(e)
e= e || window.event;
var who= e.target || e.srcElement;
if(who)
var val= who.value, L= val.length;
if(L> 175)
who.style.color= 'red';
else who.style.color= ''
if(L> 180)
who.value= who.value.substring(0, 175);
alert('Your message is too long, please shorten it to 180 characters or less');
who.style.color= '';
【讨论】：
【参考方案5】：我认为这样做可能比大多数人想象的要容易！
试试这个：
var yourTextArea = document.getElementById("usertext").value;
// In case you want to limit the number of characters in no less than, say, 10
// or no more than 400.
if (yourTextArea.length < 10 || yourTextArea.length > 400)
alert("The field must have no less than 10 and no more than 400 characters.");
return false;
请告诉我这很有用。如果是这样，请投票！谢谢！
丹尼尔
【讨论】：
【参考方案6】：尝试使用 jQuery 来避免跨浏览器兼容性问题...
$("textarea").keyup(function()
if($(this).text().length > 500)
var text = $(this).text();
$(this).text(text.substr(0, 500));
);
【讨论】：
是的，但为了安全起见。无论如何，他需要在提交和服务器端检查它。 这使得它非常慢。考虑到您在每次按键时都在移动内容，甚至是光标移动。 所有你需要做的就是 .keyup(function(e) if (>500) e.preventDefault() );【参考方案7】：快速而肮脏的通用 jQuery 版本。支持复制/粘贴。
$('textarea[maxlength]').on('keypress mouseup', function()
return !($(this).val().length >= $(this).attr('maxlength'));
);
【讨论】：
【参考方案8】：我相信如果你使用委托，它会起作用..
$("textarea").on('change paste keyup', function ()
var currText = $(this).val();
if (currText.length > 500)
var text = $(this).text();
$(this).text(text.substr(0, 500));
alert("You have reached the maximum length for this field");
);
【讨论】：
【参考方案9】：我已经为此编写了我的方法，在您的浏览器上进行有趣的测试，并给我反馈。
干杯。
function TextareaControl(textarea,charlimit,charCounter)
if(
textarea.tagName.toLowerCase() === "textarea" &&
typeof(charlimit)==="number" &&
typeof(charCounter) === "object" &&
charCounter.innerHTML !== null
)
var oldValue = textarea.value;
textarea.addEventListener("keyup",function()
var charsLeft = charlimit-parseInt(textarea.value.length,10);
if(charsLeft<0)
textarea.value = oldValue;
charsLeft = charlimit-parseInt(textarea.value.length,10);
else
oldValue = textarea.value;
charCounter.innerHTML = charsLeft;
,false);
【讨论】：
【参考方案10】：... onkeydown="if(value.length>500)value=value.substr(0,500); if(value.length==500)return false;" ...
它应该可以工作。
【讨论】：
它将完全匹配500，如果用户粘贴文本然后继续输入怎么办？ 在这种情况下返回 false 有什么作用？它不允许在文本区域中输入其他文本吗？ 没错。返回 false 会中止事件。在 jQuery 中有类似“stopPropagation”之类的东西。 好的，所以我实施了您的示例，但是当我达到字符限制 (500) 时，它就停止了，我什至无法退格或删除部分文本。 对，你想过滤掉 [DEL] 和 [BACKSPACE]以上是关于文本区域字符限制的主要内容，如果未能解决你的问题，请参考以下文章