textarea限制字数

标签: textarea 限制 | 发表时间:2014-03-22 21:48 | 作者:kkrgwbj
出处:http://www.iteye.com

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。

通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符):

<script language="#" type="text/ecmascript">
window.onload = function()
{
document.getElementById('txta1').onkeydown = function()
{   
    if(this.value.length >= 10)
      event.returnValue = false;
}
}
</script>
它的原理是通过对keydown(键盘键位按下)事件对指定id号的文本区进行监测,可以想象,它只能限制键盘输入,如果用户通过鼠标右键粘贴剪切板中的文本,它无法控制字数。

 

通过键盘输入,以上文本区只能输入10个字。但是,我们的目的并没有达到!请随便复制一些文本,试着用鼠标右键粘贴,看看发生了什么。

你可以在网上找到类似上述的其他JS脚本,它们不管多么优秀,其原理都是一样的,通过对keydown、keyup或keypress之类的键盘键 位操作事件来监控文本区的输入,无法防止鼠标右键的粘贴,为此,如果一定要真正地限制textarea的字数,我们还得为网页加另一把锁——禁用鼠标右 键,这无疑得付出额外的开销,同时也可能是网页制作者不一定愿意做的。其实,还有一个更简单的方法,使用onpropertychange属性。

onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的 value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样 式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):

代码:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>


当然,为了更为保险,处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测,如果字数超出预设的数量则进行相应处理,这样才达到真正限制字数的目的。(完)

 

 

另外一种方法实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

<script>
function check() {
var regC = /[^ -~]+/g;
var regE = /\D+/g;
var str = t1.value;

if (regC.test(str)){
    t1.value = t1.value.substr(0,10);
}

if(regE.test(str)){
    t1.value = t1.value.substr(0,20);
}
}
</script>
<textarea maxlength="10" id="t1" onkeyup="check();">
</textarea>

 

 

 

还有一种方式:

function textCounter(field, maxlimit) {
if (field.value.length > maxlimit){
field.value = field.value.substring(0, maxlimit);
}else{
document.upbook.remLen.value = maxlimit - field.value.length;
}
}

<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea>
剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>

 

 

function LimitTextArea(field){
    maxlimit=200;
    if (field.value.length > maxlimit)
     field.value = field.value.substring(0, maxlimit);
      
   }

<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

 

title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。

例如:<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [textarea 限制] 推荐:

textarea限制字数

- - JavaScript - Web前端 - ITeye博客
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到. 与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.

限制与自由

- zx - 左岸读书_blog
无需仔细观察,就会发现,你我的周围充斥这样的声音:. “我之所以没成功,是因为我的出生的时代不好,经过30年的改革开放,到了现在这个阶段,机会都饱和了. 我之所以没成功,是因为我的家庭比较普通,如果我生在比尔盖茨或者巴菲特的家里,我绝对会成功. 我之所以没成功,是因为我的父母把我生得不漂亮或者不帅,不然我有机会成为章子怡、王力宏之类的.

appcache的浏览器限制

- - 前端观察
appcache(之前的manifest)是html5的一个特性,用来实现浏览器端的资源缓存,是webapp的一个重要工具. 虽然大部分浏览器的最新版都它提供了支持,但是各浏览器的实现却有些差异,我们来看一下~~. 数据来源: browserscope. 可以看出,桌面端的浏览器除了IE10都没有限制,移动端的基本都有各种限制.

SSH的登录限制

- - 操作系统 - ITeye博客
从网络来的数据包首先要经过iptables,所以可以在iptables上面加上规则来限制ip的访问. 比如只限制3个外网,1个内网IP连接. 直接在/etc/hosts.deny里面加一行. sshd: ALL EXCEPT xxx.xxx.xxx.xxx(允许的ip或网段). sshd: ALL EXCEPT xxx.xxx.xxx.xxx/255.255.255.0(允许的网段) 就可以了.

IE CSS文件限制

- - Web前端 - ITeye博客
单个页面最多31个css文件. 每个css文件大小最大288k. 每个css文件最多4095个选择器. Resource merging, which help you reduce the number of requests made to the server, may bring the following dilemma in IE.

Linux SSH帐号权限限制

- Jona - 细节的力量
来源:http://feedproxy.google.com/~r/JoysBoy/~3/TdH16qMVTJk/. 在天朝用SSH来Proxy是家常便饭了,别跟我说你不知道怎么用. 我自己也经常在vps上开一些ssh帐号给朋友用,一般都把shell设置为nologin,这样来禁止他们登入服务器. 不过有一点很麻烦,密码只能由我设,当然也只能设个简单的,朋友不可能把自己平常用的密码随便告诉我,改密码也只能由我操作.

语言限制思维 #随笔杂记#

- 张沈鹏 - 陶马文 toyuet.42qu.com
大概五年前准备考托福的时候报了新东方的培训班,当时讲作文的老师叫李笑来,当时他讲过这样一句话,大意是并不是人先有了想法之后再用语言将其表述出来,而是学习语言的过程参与了思维的构建. 在此之前我的英文水平很一般,后来在某个雷雨交加的夜晚突然发现了编程语言和英语之间很巧妙的联系. 从那之后我开始尝试将一段阅读材料用代码重新表述一遍,能够推演出很多原文中有些难懂的地方.

“限制用户选择”的迷思

- - 滯銷書
经常听到的一个观点是,如果给用户太多选择,他们通常不会配置出最好的、最高效、最有品位的方案,给他们一个精心设计的默认方案,其他的选择越少越好. 大多数的用户并不需要大多数的功能和设置,选择太多会带来困扰,或者让用户误解产品,又或者设计者容易被无效需求牵着鼻子走,分散精力,增加开发和维护的工作量. 不错,这个观点在一定程度上是对的,在这种思路指导下,很多产品都取得了成功.

HTTP中的URL长度限制

- - 博客园_首页
由于之前的一个web项目中,要用get方法去获取数据,但结果时常报错,经过仔细排查才发现原来url长度超过了限制,通过缩短url和发送多次请求的方法解决了该问题,之后在网上查了些资料,发现这个问题还是内藏玄机,要比自己想的复杂. 首先,其实http 1.1 协议中对url的长度是不受限制的,协议原文:.