编程 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常见表单应用技巧

Jan 09 Javascript

Javascript base64编码实现代码

Dec 02 Javascript

json数据处理技巧(字段带空格、增加字段、排序等等)

Jun 14 Javascript

Extjs grid panel自带滚动条失效的解决方法

Sep 11 Javascript

js实现向右横向滑出的二级菜单效果

Aug 27 Javascript

jQuery实现加入收藏夹功能(主流浏览器兼职)

Dec 24 Javascript

javascript获取指定区间范围随机数的方法

Sep 08 Javascript

vue项目环境变量配置的实现方法

Oct 12 Javascript

vue中$refs, $emit, $on, $once, $off的使用详解

May 26 Javascript

layui 对table中的数据进行转义的实例

Sep 12 Javascript

关于angular浏览器兼容性问题的解决方案

Jul 26 Javascript

8个非常实用的Vue自定义指令

Dec 15 Vue.js

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