[转]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之后很轻松的 ...
随机推荐
- Spring IoC源码解决——工具篇Eclipse
题外话 对于Spring框架,平时都是点到为止,停留在会用的程度.一直以来都想深入学习下,刚好最近看到<Spring源码深度解析>,所以想随着书本深入学习一下. 如果用Maven 如果使用 ...
- Gogs - 基于 Go 语言的自助 Git 服务
Gogs(Go Git Service) 是一个基于 Go 语言的自助 Git 服务.Gogs 的目标是打造一个最简单.最快速和最轻松的方式搭建自助 Git 服务.使用 Go 语言开发使得 Gogs ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- AE选中要素
private void 选中要素ToolStripMenuItem_Click(object sender, EventArgs e) { if(axMapControl2.LayerCount&l ...
- 基于SharePoint 2013的论坛解决方案[开源]
前言 这是自己在空闲时间里,为了提高对SharePoint的认识和熟悉技术,做的一个Demo.可能不尽完善,但是基本功能都已经有了,欢迎大家评论和提意见.自己也会在把源代码放到Github上进行开源, ...
- Android项目实战（十七）：QQ空间实现（二）—— 分享功能 / 弹出PopupWindow
这是一张QQ空间说说详情的截图. 分析: .点击右上角三个点的图标,在界面底部弹出一个区域,这个区域有一些按钮提供给我们操作 .当该区域出现的时候,详情界面便灰了,也说成透明度变化了 .当任意选了一个 ...
- 【C语言】C语言关键字
目录: [含义] [C语言中的关键字] [关键字分类] · 数据类型关键字 · 类型修饰符关键字 · 复杂类型关键字 · 存储级别关键字 · 流程控制关键字 ...
- Android 扒开美女衣服
本文主要实现一个小的扒开美女衣服的游戏项目 效果如下: 项目布局设计: <FrameLayout xmlns:android="http://schemas.android.com/a ...
- 关于Android四大组件的学习总结
Activity Android应用的用户界面是由Activity类管理的.和其他组件一样,Activity会用一系列生命周期回调函数通知当前的状态. 生命周期 Activity的四种状态 1.运行状 ...
- art.dialog 返回提示
<form target="_top" /> 1 如果加 target="_top" 提示跳出子页面 2 如果不加则在子页面提示