详解maxlength属性在textarea里奇怪的表现
HTML5给表单带来了很多改变，比如今天要说的maxlength，这个属性可以限制输入框输入的最大字字符数，更方便的是对于粘贴的内容也能够根据字符数自动截断。
最近就接到这要一个需求，限制用户最多输入600字（汉字和字母不区分），对于粘贴的内容也要能自动截断，输入600字后就无法输入。
第一时间想到了maxlength，基本满足需求，但还是有一些怪异的表现。
看下面的代码：
<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
already.textContent = text.value.length;
}
上述代码中限制输入字符数为600，并通过oninput监听用户的输入，没有用keydown，因为keydown只能监听用户键盘输入，对于粘贴没有反应。。。oninput可以做到。
这时候直接输入600字后就不再可以输入，删除一些，再输入一些，表现正常。奇怪的是如果你粘贴进textarea里一大堆文字，以为maxlength的存在自动截断，此时textarea里正好有600个字符，这时候你删除一些字符，然后再尝试输入，你会发现：
卧槽，无法输入了！！！再删的多一些，这时可以继续输入，但是！！！在输入还不到600字符的时候，突然又不能输入了！！！
chrome下以及我的android机器下都会这样。。暂时不知道原因。测试了下input，不会有这样的情况出现，而且maxlength属性的值小一点的话就不会有这种情况，比如10。。。
这样的话maxlength就不靠谱了，就自己多写点代码吧，既然oninput这么灵活，就用它了。
修改下代码，去掉textarea的maxlength属性，使用input监听textarea的value值，超过600就自动截断，造成一种无法输入的错觉。
text.oninput = function() {
if(text.value.length >= 600) {
text.value = text.value.substr(0,600);
}
already.textContent = text.value.length;
}
不放心的话，可以继续监听keydown事件，在输入大于600字符后阻止默认事件，但是有几个键是不能禁止的：删除退格和回车：
text.onkeydown = function() {
if(text.value.length >= 600) {
// 删除:46 退格:8 回车:13
if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
e.preventDefault();
}
}
}
IE8以下不支持maxlength属性，也不支持oninput，但是他们有一个更强大的方法：onpropertychange。
下面通过一端代码讲解textarea实现maxlength属性
<script language="javascript" type="text/javascript">
function textlen(x,y){
var thelength = x.value.length;
window.status=thelength+' of '+y+' maximum characters.';
}
function maxtext(x,y){
tempstr = x.value
if(tempstr.length>y){
x.value = tempstr.substring(0,y);
}
textlen(x,y);
}
</script>
<form name="myform">
<textarea name="mytextarea"
cols="45"
rows="3"
wrap="virtual"
onkeypress="return(this.value.length<20)"
onkeydown="textlen(this,20)"
onkeyup="textlen(this,20)"
onblur="maxtext(this,20)">
</textarea>
</form>
相关文章
- 这篇文章主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下...2015-12-29
- 在html表单中textarea中我们按回车与换行都是一些asc 或特殊的字符的我们是看不到了，如果不进行转换输出文字是没的排版的，下面本文章就此问题给各位总结一些例子吧。...2016-11-25
- 把textarea里面的回车替换成<br> 今天在写一个招聘系统时发现直接把内容提交到数据库以我们原有的格式己经没有了,所有的在一条第没有换行,空格等之类了,详细查看了一...2016-11-25
- 如果我们利用textarea提交的数据回车换行与空格都会自动过滤了，所有提交的数据都是没有格式的，下面我们一起来看看解决textarea中回车换行问题。 方法一， 代...2016-11-25
JavaScript中Textarea滚动条不能拖动的解决方法
这篇文章主要介绍了JavaScript中Textarea滚动条不能拖动的解决方法,主要针对IE浏览器中Textarea滚动条绑定了onfocus事件时分析对应的处理方法,需要的朋友可以参考下...2015-12-17关于php处理textarea回车换行替换方法（js调用出错）
关于php教程处理textarea回车换行替换方法（js调用出错） 在textarea输入框里面chr(13)是代表回车，但当我替换时确实可以我要的字符，但是他显示时回车的地方就会有一个空格，...2016-11-25- 本文主要介绍了js实现textarea限制输入字数的原理与方法。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-19
AngularJS实现textarea记录只能输入规定数量的字符并显示
AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。接下来通过本文给大家介绍AngularJS实现textarea记录只能输入规定数量的字符并显示的相关内容，需要的朋友参考下吧...2016-04-27- 我在使用表单处理信息时发现，对文本域的处理不正确。例如下面的一个表格： --------------------------------------------------------------- test.html <html> <h...2016-11-25
- 如果我们利用textarea提交的数据回车换行与空格都会自动过滤了，所有提交的数据都是没有格式的，下面我们一起来看看解决textarea中回车换行问题。 方法一， 代...2016-09-20
php逐行读取textarea及向textarea输出换行符
最近在研究discuz，发现后台很多设置项，都用textarea填写，然后每行一项，感觉很有意思，嘿嘿，主要是很简单，免得在设置的时候为控件的问题浪费太多时间。 不多说了，上代码： ...2016-11-25- 有一些朋友可能会发现我们在html提交给php处理保存数据到mysql中之后会发现我们再次从mysql读出数据时会有很多的空格了，那么我们如果直接在mysql中查看又没有空间，这是...2016-11-25
- 如果我们利用textarea提交的数据回车换行与空格都会自动过滤了，所有提交的数据都是没有格式的，下面我们一起来看看解决textarea中回车换行问题。 方法一， 代...2016-11-25
- 删除textarea回车与换行代码 function removeNL(s) { // NewLine, CarriageReturn and Tab characters from a String // will be removed and will retu...2016-11-25
- 涉及到textarea中的换行，因为填入的内容是base64编码之后的结果（规范规定，base64编码结果中每76个字符需要加上一个回车换行，即一个" "），在ie下测试，一切ok，但是到了firefox和...2016-11-25
- Editor.htm <textarea style="behavior:url('Editor.htc');"></textarea> Editor.htc <public:attach event=oncontentready onevent=initEditor()><script>//...2016-09-20
- input 和 textarea 唯一的区别就是 textarea中的换行会被保存到数据库教程！ 如果你没有在存入的 使用 诸如 nl2br 的函数处理掉 换行 或者 读出的时候 做 nl2br 处理！...2016-09-20
- 经过我的测试表单textarea换行符,在windows下是rn,在linux才是n(这个没实 测),另外,在win下,r,n均有换行的功能 表格 6-1. 转义字符 序列 含义 n 换行（lf 或 ascii 字...2016-11-25