编程 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 相关文章推荐

JS获取scrollHeight问题想到的标准问题

May 27 Javascript

Ajax异步提交表单数据的说明及方法实例

Jun 22 Javascript

jfreechart插件将数据展示成饼状图、柱状图和折线图

Apr 13 Javascript

jquery动态增加删减表格行特效

Nov 20 Javascript

jQuery操作属性和样式详解

Apr 13 Javascript

js停止冒泡和阻止浏览器默认行为的简单方法

May 15 Javascript

AngularJS入门教程之控制器详解

Jul 27 Javascript

vue2中filter()的实现代码

Jul 09 Javascript

更改BootStrap popover的默认样式及popover简单用法

Sep 13 Javascript

vue发送websocket请求和http post请求的实例代码

Jul 11 Javascript

Layui 数据表格批量删除和多条件搜索的实例

Sep 04 Javascript

JavaScript展开运算符和剩余运算符的区别详解

Feb 18 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