控制textarea的maxLength

最新推荐文章于 2021-05-18 11:07:12 发布

helenxiaolove

最新推荐文章于 2021-05-18 11:07:12 发布

阅读量448

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/helenxiaolove/article/details/83457991

版权

[url]http://www.zhuoda.org/irini/84659.html[/url]
textarea标签虽然有maxLength属性，但是它并不管用，所以只能自己控制，
下面的例子中我的思路是：
在 textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，有个问题，如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法，解决办法就是当textarea获取焦点时把鼠标右键失效，失去焦点时再恢复鼠标右键

这个方法从功能上解决了textarea的maxLength问题，但还不是很完美，在输入超过maxLength的字符后光标会有闪烁，因为是截取回填，没有像input的maxLength那样真正不让输入，今天一时也想不到好办法，以后找到再补充进来。

<html>

<head>

<title></title>
<script type="text/javascript">

var textarea_maxlen = {
isMax : function (){
var textarea =
document.getElementById("area");
var max_length = textarea.maxLength;
if(textarea.value.length > max_length){
textarea.value =
textarea.value.substring(0, max_length);
}
},
disabledRightMouse : function (){
document.oncontextmenu =
function (){ return false; }
},
enabledRightMouse : function (){
document.oncontextmenu = null;
}
};
</script>
</head>

<body>
<textarea id="area" maxLength="10"
οnkeyup="textarea_maxlen.isMax()"
οnfοcus="textarea_maxlen.disabledRightMouse()"
οnblur="textarea_maxlen.enabledRightMouse()"
rows="20" cols="100">
</textarea>
</body>

</html>

因为maxLength在火狐里取不到值，所以用取自定义属性的方法取值：
[color=red]var max_length = textarea.maxLength;
改为
var max_length = textarea.getAttribute("maxLength"); [/color]

helenxiaolove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控制textarea的maxLength

[url]http://www.zhuoda.org/irini/84659.html[/url]textarea标签虽然有maxLength属性，但是它并不管用，所以只能自己控制，下面的例子中我的思路是：在 textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，有个问题，如果用鼠标来拷贝粘贴就没法调用判断maxLeng...
复制链接

扫一扫