限制textarea文本域中输入字符个数(防粘贴功能)

通常我们需要对用户文本输入进行字符数量上的限制,对于<input type="text" value="" />文本输入域,我们可以通过maxlength属性来限制用户可输入的最大字符数,但是textarea这种文本输入域的话我们只能通过js来控制输入字符数了,因为它没有提供maxlength属性。首先我们定义一个简单的函数,如下:

/**
* 限制textarea文本域输入的字符个数
* @id textarea表单ID
* @count 要限制的最大字符数
*/
function limitChars(id, count){
var obj = document.getElementById(id);
if (obj.value.length > count){
obj.value = obj.value.substr(0, count);
}
}

说明:这个函数的作用就是当textarea文本域中的字符数超过指定个数时即进行截取。有了这个函数,我们接下来要做的就是选择在何时调用该函数:

<textarea id="mytext" cols="" rows="" οnkeydοwn="limitChars(''mytext'', 120)" οnchange="limitChars(''mytext'', 120)" onpropertychange="limitChars(''mytext'', 120)"></textarea>

说明:1、onkeydown监控用户键盘输入并进行字符截取;2、onchange防止用户通过复制粘贴功能输入超过指定最大字符数的字符;3、onpropertychange针对IE(FF中无效),作用就是当用户通过复制粘贴功能来进行输入时,当粘贴完成的瞬间即进行字符截取,而不是像onchange那样需要等到焦点离开textarea控件时才进行字符截取(该属性主要为了用户体验上的效果,没有该属性已经可以真正完成限制字符输入个数的任务)。

说明:这个函数的作用就是当textarea文本域中的字符数超过指定个数时即进行截取。有了这个函数,我们接下来要做的就是选择在何时调用该函数:

<textarea id="mytext" cols="" rows="" οnkeydοwn="limitChars('mytext', 120)" οnchange="limitChars('mytext', 120)" onpropertychange="limitChars('mytext', 120)"></textarea>

说明:1、onkeydown监控用户键盘输入并进行字符截取;2、onchange防止用户通过复制粘贴功能输入超过指定最大字符数的字符;3、onpropertychange针对IE(FF中无效),作用就是当用户通过复制粘贴功能来进行输入时,当粘贴完成的瞬间即进行字符截取,而不是像onchange那样需要等到焦点离开textarea控件时才进行字符截取(该属性主要为了用户体验上的效果,没有该属性已经可以真正完成限制字符输入个数的任务.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值