详解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>
相关文章
php main 与 iframe 相互通讯类(js+php同域/跨域)
这篇文章主要介绍了php main 与 iframe 相互通讯类(js+php同域/跨域),需要的朋友可以参考下2017-09-09
随着前端技术的发展，前端业务越来越繁重，这大大增加了JS代码量。因此，要提高Web的性能，我们不仅需要关注页面加载的时间，还要注重在页面上操作的响应速度。那么，接下来我们讨论几种能够提高JavaScript效率的方法。2017-02-02
这篇文章主要介绍了JavaScript学习笔记之数组的增、删、改、查的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了js实现类bootstrap模态框动画的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要介绍了通过WebSocket实现异步导出,本篇文章记录大批量数据导出时间过长,导致接口请求超时问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
Javascript自定义函数判断网站访问类型是PC还是移动终端
如果，能够判断出访问Web网页的类型(PC还是移动终端)。就可以解决许多绚丽多彩的 Flash效果出不来的问题2014-01-01
这篇文章主要介绍了详解ES6语法之可迭代协议和迭代器协议,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
为了给用户一个流畅的体验,token过期后需要重新请求新的token替换过期的token。本文将详细介绍uniapp无痛刷新token方法。2021-06-06
这篇文章主要为大家介绍了JavaScript设计模式中的状态模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了BootStrap 超链接变按钮的实现方法以及js按钮bootstrap超链接的操作方法，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
最新评论