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

所属分类: 网络编程 / JavaScript 阅读数: 1955
收藏 0 赞 0 分享

标准的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>

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多