[转]TextArea设置MaxLength属性最大输入值的js代码
标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用，只有当事件发生时才起作用
如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
但TEXT中有且起作用<input type="text" maxlength="">，
那么在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(,mlength)
}
</script>
<textarea maxlength="" 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(,y);
}
textlen(x,y);
}
// --></mce:script>
<form name="myform">
<textarea name="mytextarea"
cols=""
rows=""
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(,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="" 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);
} -----------------------------------------------------------------------------------------------
HTML代码 复制代码 代码如下: <asp:TextBox ID="TextBoxAddress" runat="server" Width="200px"
TextMode="MultiLine" Height="113px" MaxLength=""></asp:TextBox>
<script language="javascript" type="text/javascript">
SetTextAreaMaxLength('<%=TextBoxAddress.ClientID %>',);
</script>
[转]TextArea设置MaxLength属性最大输入值的js代码的更多相关文章
- 小程序textarea设置maxlength后不是你想的那样简单
可能很多小伙伴们.看见这个标题后; 觉得作者是一个标题党. textarea设置maxlength后, 限制用户输入的字符呗! 还能怎么样呢? 恭喜你,说对了一半. 之前我也一直是这样想的. 知道今天 ...
- 为textarea增加maxlength属性(转)
如果只是單純地想限制 textarea 中的字數,不想寫太多的話,可用: <textarea onkeyup="this.value = this.value.slice(0, 8 ...
- textarea的maxlength属性兼容解决方案
IE10版本的textarea才支持maxlength属性:低版本的IE都不兼容,实际上低版本的IE的市场存在率还是很高的: 所以还是很有必要来整合一套解决方案的: Jquery版本 $(functi ...
- IE6-9不支持Textarea的maxlength属性
给textarea标签添加一个maxlength=200,测试工程师提bug说IE9没起作用.后一测试,发现IE10一下的浏览器均不支持 <textarea maxlength="20 ...
- 根据对象的某一属性进行排序的js代码（如：name,age）
var data = [{ name: "jiang", age: 22 }, { name: "AAAAAAAAAAAAAA", age: 21 }, { n ...
- maxlength属性在textarea里奇怪的表现
HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入 ...
- 详解maxlength属性在textarea里奇怪的表现
这篇文章主要介绍了maxlength属性在textarea里奇怪的表现的相关资料,需要的朋友可以参考下 HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 今天做一个项目的时候，要在一个编辑的jsp页面的textarea标签设置value属性，结果发现他没有value属性，但是是编辑页面又必须要回显要修改的内容，所以在参考了w3cschool之后很轻松的解决了这个问题。
今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...
随机推荐
- easyui1.3.2中使用1.3.6或1.4.x的calendar
首先在1.3.2中calendar控件不支持日历某天的颜色进行改变,和自定义回调函数 Name Type Description Default width number The width of c ...
- ae显示标注
//添加标注,比TextElment功能更强大 public static void ToAddAnnotate(ILayer layer, string fieldName) { IGeoFeatu ...
- Oracle11gR2用EXP导出时报EXP-00011错误的解决
C:\>exp businessdata/businessdata file=dropcol.dmp tables=ACSTRULE,ARREARSCFG,ARREARS_REPORT_ACCT ...
- phonegap创建的ios项目推送消息出现闪退现象
使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...
- Android 常见对话框
1.对话框通知(Dialog Notification) 当你的应用需要显示一个进度条或需要用户对信息进行确认时,可以使用对话框来完成. 下面代码将打开一个如图所示的对话框: public void ...
- UISegmentedControl(人物简介)
效果图 当你点击上面人物名字的时候 ,就可以随意切换人物. 这个很有趣 , 你还可以试着添加音乐播放器 .以及一些别的来完善你想做的. 好吧 , 废话不多说 , 上代码. #import " ...
- mac PHP配置
apache默认路径配置方法 apache的配置 apache已经自带了,只需如下三个命令就可以了. 开启apache服务 sudo apachectl start 停止apache服务 sudo ...
- C#复习⑥
C#复习⑥ 2016年6月19日 23:46 Main Interfaces & Delegates 接口和委托 1.接口基本语法 public interface IList : IColl ...
- DOM样式操作
CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...
- 13、系统集成项目经理要阅读的书籍 - IT软件人员书籍系列文章
系统集成项目经理主要对弱电等项目负责.一般包括计算机网络系统,计算机设备系统,智能楼宇,机房建设等.在软考中,系统集成项目经理放在了中级,这个只能说明系统集成项目经理需要的经验没有高级信息系统项目管理 ...