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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
canvas绘制环形进度条
Feb 23 Javascript
js实现产品缩略图效果
Mar 10 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP中的表达式简述
2016/05/29 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 提取文件的小程序
2009/07/29 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python之pymysql的使用小结
2019/07/01 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python定义函数实现累计求和操作
2020/05/03 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
优秀演讲稿范文
2013/12/29 职场文书
给领导的检讨书
2014/02/16 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
同学会邀请函模板
2015/01/30 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
运动会通讯稿200字
2015/07/20 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python