编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在 IE 中调用 javascript 打开 Excel 表

Dec 21 Javascript

MooTools 1.2中的Drag.Move来实现拖放

Sep 15 Javascript

Pro JavaScript Techniques学习笔记

Dec 28 Javascript

Jquery ajax执行顺序返回自定义错误信息(实例讲解)

Nov 06 Javascript

jquery批量设置属性readonly和disabled的方法

Jan 24 Javascript

js简单的表格添加行和删除行操作示例

Mar 31 Javascript

Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)

Mar 24 Javascript

easyui导出excel无法弹出下载框的快速解决方法

Nov 10 Javascript

详解Angular的双向数据绑定(MV-VM)

Dec 26 Javascript

JS逻辑运算符短路操作实例分析

Jul 09 Javascript

bootstrapTable+ajax加载数据 refresh更新数据

Aug 31 Javascript

小程序实现层叠卡片滑动效果

Aug 26 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