TextArea设置MaxLength属性最大输入值的js代码


Posted in Javascript onDecember 21, 2012

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用
如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
但TEXT中有且起作用<input type="text" maxlength="20">,
那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。

方法1、如果只需要截取多少个字符的内容,则可以:

<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>


<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>

方法2

<script type="text/javascript"> 
function ismaxlength(obj){ 
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" 
if (obj.getAttribute && obj.value.length>mlength) 
obj.value=obj.value.substring(0,mlength) 
} 
</script> 
<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>

这个方法采用截断法,输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。

方法3、这个方法直接判断输入的长度

<script language="javascript" type="text/javascript"> 
<!-- 
function imposeMaxLength(Object, MaxLen) 
{ 
return (Object.value.length <MaxLen); 
} 
--> 
</script> 
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ></textarea>

当输入内容大于15时因为返回为false所以这个实现不会显示光标闪烁的问题,但没有解决复制过来的长度限制问题即复制过来的内容可以超过最大长度限制
return (Object.value.length <=MaxLen);但我测试发现当输入字节数=maxlen时还可以输入一个字符,所以我改成 return (Object.value.length <MaxLen);

方法4、其实方法4是方法2与方法3的基础上进一步优化。客观的说方法2与方法3都只做了一部分工作

<mce: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); 
} 
// --></mce: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)" 
>

上面的方法在原来的基础上加了onblur事件,这主要用于处理当用户不是采用输入而是通过复制粘贴方法来完成文本的转入时的问题。实际就是方法2与方法3的结合版。 以下是我为TextArea增加并利用maxlength属性及结合上例的结果:<html><head><script type="text/javascript">function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""if (obj.getAttribute && obj.value.length>mlength)alert('该文本框允许输入最大长度为'+mlength+"个字符,超出内容将会被截断")obj.value=obj.value.substring(0,mlength)}function imposeMaxLength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" return (obj.value.length <mlength);}</script></head><body><form name="myform"> <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)"></textarea></form></body></html> 

Javascript代码
---------------------------------------------------------------------------------------------

function SetTextAreaMaxLength(controlId,length) 
{ 
// JScript File for TextArea 
// Keep user from entering more than maxLength characters 
function doKeypress(control,length){ 
maxLength = length; 
value = control.value; 
if(maxLength && value.length > maxLength-1){ 
event.returnValue = false; 
maxLength = parseInt(maxLength); 
} 
} 
// Cancel default behavior 
function doBeforePaste(control,length){ 
maxLength = length; 
if(maxLength) 
{ 
event.returnValue = false; 
} 
} 
// Cancel default behavior and create a new paste routine 
function doPaste(control,length){ 
maxLength = length; 
value = control.value; 
if(maxLength){ 
event.returnValue = false; 
maxLength = parseInt(maxLength); 
var oTR = control.document.selection.createRange(); 
var iInsertLength = maxLength - value.length + oTR.text.length; 
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength); 
oTR.text = sData; 
} 
} 
function doDragenter(control,length) 
{ 
maxLength = length; 
value = control.value; 
if(maxLength){ 
event.returnValue = false; 
} 
} 
function addEvent(elm, evType, fn, useCapture) 
{ 
if (elm.addEventListener) 
{ 
elm.addEventListener(evType, fn, useCapture); 
return true; 
} 
else if (elm.attachEvent) 
{ 
var r = elm.attachEvent('on' + evType, fn); 
return r; 
} 
else { 
elm['on' + evType] = fn; 
} 
} 
function AttacheventTextAreaBeforePaste(obj,length) 
{ 
return function() 
{ 
doBeforePaste(obj,length) 
} 
} 
function AttacheventTextAreaPaste(obj,length) 
{ 
return function() 
{ 
doPaste(obj,length) 
} 
} 
function AttacheventTextAreaKeyPress(obj,length) 
{ 
return function() 
{ 
doKeypress(obj,length) 
} 
} 
function AttacheventTextAreaDragEnter(obj,length) 
{ 
return function() 
{ 
doDragenter(obj,length); 
} 
} 
var obj = document.getElementById(controlId); 
addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null); 
addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null); 
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null); 
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null); 
} 
function SetTextAreaMaxLength(controlId,length) 
{ 
// JScript File for TextArea 
// Keep user from entering more than maxLength characters 
function doKeypress(control,length){ 
maxLength = length; 
value = control.value; 
if(maxLength && value.length > maxLength-1){ 
event.returnValue = false; 
maxLength = parseInt(maxLength); 
} 
} 
// Cancel default behavior 
function doBeforePaste(control,length){ 
maxLength = length; 
if(maxLength) 
{ 
event.returnValue = false; 
} 
} 
// Cancel default behavior and create a new paste routine 
function doPaste(control,length){ 
maxLength = length; 
value = control.value; 
if(maxLength){ 
event.returnValue = false; 
maxLength = parseInt(maxLength); 
var oTR = control.document.selection.createRange(); 
var iInsertLength = maxLength - value.length + oTR.text.length; 
var sData = window.clipboardData.getData("Text").substr(0,iInsertLength); 
oTR.text = sData; 
} 
} 
function doDragenter(control,length) 
{ 
maxLength = length; 
value = control.value; 
if(maxLength){ 
event.returnValue = false; 
} 
} 
function addEvent(elm, evType, fn, useCapture) 
{ 
if (elm.addEventListener) 
{ 
elm.addEventListener(evType, fn, useCapture); 
return true; 
} 
else if (elm.attachEvent) 
{ 
var r = elm.attachEvent('on' + evType, fn); 
return r; 
} 
else { 
elm['on' + evType] = fn; 
} 
} 
function AttacheventTextAreaBeforePaste(obj,length) 
{ 
return function() 
{ 
doBeforePaste(obj,length) 
} 
} 
function AttacheventTextAreaPaste(obj,length) 
{ 
return function() 
{ 
doPaste(obj,length) 
} 
} 
function AttacheventTextAreaKeyPress(obj,length) 
{ 
return function() 
{ 
doKeypress(obj,length) 
} 
} 
function AttacheventTextAreaDragEnter(obj,length) 
{ 
return function() 
{ 
doDragenter(obj,length); 
} 
} 
var obj = document.getElementById(controlId); 
addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null); 
addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null); 
addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null); 
addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null); 
}

-----------------------------------------------------------------------------------------------
HTML代码
<asp:TextBox ID="TextBoxAddress" runat="server" Width="200px" 
TextMode="MultiLine" Height="113px" MaxLength="10"></asp:TextBox> 
<script language="javascript" type="text/javascript"> 
SetTextAreaMaxLength('<%=TextBoxAddress.ClientID %>',10); 
</script>
Javascript 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 #Javascript
JQuery实现简单验证码提示解决方案
Dec 20 #Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 #Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 #Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 #Javascript
img onload事件绑定各浏览器均可执行
Dec 19 #Javascript
JavaScript实现快速排序(自已编写)
Dec 19 #Javascript
You might like
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Python中的Classes和Metaclasses详解
2015/04/02 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
2014年计算机专业个人自我评价
2014/01/19 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
前台接待员岗位职责
2015/04/15 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
六年级作文之自救
2019/12/19 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Golang 实现WebSockets
2022/04/24 Golang
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS