[转]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之后很轻松的 ...
随机推荐
- Intro.js 网站演示
Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- 15款美丽的设备模板，帮助展示你的 APP
有什么更好的方式来显示您的应用程序的外观和感觉呢?你看了这些设计示例之后就会有灵感了.无论是在 iPhone,iPad,Android,还是在桌面应用程序或网站,这些设计都增加了一些视觉上的吸引力,并 ...
- <!DOCTYPE>
定义和用法 所有浏览器都支持 <!DOCTYPE> 声明. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!D ...
- HTML <base> 标签 为页面上的所有链接规定默认地址或默认目标
定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...
- FOR ALL ENTRIES IN 与 INNER JOIN 写在一个SQL上影响效率
SELECT likp~vbeln likp~lfart lips~werks likp~kunnr INTO CORRESPONDING FIELDS OF TABLE it_likps FROM ...
- Quartz2D复习（四） --- 图层CALayer和动画CAAnimation
1.CALayer 1).在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮.文本标签.文本输入框.图标等,这些都是UIView 2).UIView之所以能显示在屏幕上,完全是因为它内 ...
- 使用imeOptions
Android的软键盘右下角有Action按钮,如下图的“上一步” 在EditText中有 android:imeOptions选项,它包括完成按钮“actionDone”,发送按钮“actionSe ...
- socket编程中客户端常用函数 以及简单实现
1 常用函数 1.1 connect() int connect(int sockfd, const struct sockaddr *servaddr, socklen_taddrlen); 客 ...
- 【Android】保存Fragment切换状态
前言 一般频繁切换Fragment会导致频繁的释放和创建,如果Fragment比较臃肿体验就非常不好了,这里分享一个方法. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.c ...