实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
document.getElementById("<%=textBox1.ClientID %>").value
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)
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>
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)的更多相关文章
- 限制UITextField/UITextView的输入字数与中文输入之后的英文换行问题
		
要限制一个UITextField/UITextView的输入字数,首先想到的应该是通过UITextFieldDelegate/UITextViewDelegate的代理方法来限制,那么如何来更好的限制 ...
 - 实现textarea限制输入字数
		
实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...
 - Android EditText输入字数限制总结(包含中文输入内存溢出的解决方法)
		
转载请注明,大飞:http://blog.csdn.net/rflyee/article/details/38856539 限定EditText输入个数的解决方式非常多,可是一般主要考虑两点.也就是处 ...
 - 【移动开发】EditText输入字数限制总结(包括中文输入内存溢出的解决方法)
		
限定EditText输入个数的解决方案很多,但是一般主要考虑两点,也就是处理两件事:(1)不同语言字符(英文.中文等)处理方式(2)输入字符达到数目后,是否仍然允许用户输入 第一点,涉及的东东其实蛮多 ...
 - jQuery 写的textarea输入字数限制
		
//先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf(" ...
 - JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决
		
textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...
 - textarea 限制输入字数
		
一般情况下很多人限制textarea的输入字数会使用 onkeyup 或 onchange事件,但是这两种事件都带有明显的不足. onkeyup 事件只能监听键盘事件,而对于用户的粘贴毫无办法:而on ...
 - 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
		
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
 - Textarea输入字数限制(兼容iOS&安卓)
		
最近在做一个微信公众号的页面,其中有对textarea做输入字数限制,而且需要兼容iOS和安卓手机,下面直接贴代码: <!DOCTYPE html> <html lang=" ...
 
随机推荐
- 2015GitWebRTC编译实录13
			
2015.07.21 libboringssl.a 编译通过主要是生成路径,去除test文件比较啰嗦,后继测试需要重点跟进下 CC obj/third_party/boringssl/boringss ...
 - OpenGL概述
			
简介 状态机 glBegin()与glEnd() glFlush()与glFinish() OpenGL简介 OpenGL是图形硬件的一种软件接口.它被设计为硬件独立的接口,可用于多种不同硬件平台.O ...
 - vb6 枚举对象属性
			
Option Explicit '引用Library TLI ' C:\WINDOWS\system32\TLBINF32.DLL ' TypeLib Information Private Sub ...
 - python百分比数比较大小
			
python是无法识别百分比的,估计你的百分比是string,所以需要转成int # !/usr/bin/python3.4 # -*- coding: utf-8 -*- # 百分数转为int de ...
 - 入口点函数的19种消息,AcRxArxApp只处理16种。
			
AcRx::AppMsgCode一共有19种消息. 但由IMPLEMENT_ARX_ENTRYPOINT宏实现的App类,只处理了16种消息. 缺: kSuspendMsg = 16, kIni ...
 - KO+bootstrap 模态窗全选绑定
			
HTML <div id="modalAreaID01"> <button type="button" class="btn btn ...
 - lumen 登陆 注册 demo
			
本文将用Lumen来实现一个完整的用户注册.登录及获取用户信息的API. Lumen环境搭建和初始化详细步骤请参考上篇文章<Lumen安装配置使用入门>一文. 一.准备工作 1.Lumen ...
 - 今天的工作发现了4年前的“bug一枚”
			
上午的时候山东公司要求下拨资金160万(因目前系统不能支付个人卡),在下拨单保存的时候系统提示余额不足,我马上看内部存款,结果发现人家还有190万呢,然后就看今天的委托付款单还有下拨单,山东都没有,一 ...
 - 基于adt-bundle-windows-x86的android开发环境搭建
			
0,简介: 最近简单着手了解 android 开发.工欲善其事,必先利其器. 我本人不太喜欢使用java 开发,所以简单了解了下其 c# c++都可以进行android 开发,用c++的话要使用NDK ...
 - UDP发送数据测试
			
一个合作伙伴说UDP发送数据,A(IP:192.168.1.100 子网掩码255.255.255.0)网段能发数据到B网段,但B(IP:192.168.2.100 子网掩码255.255.255.0 ...