[转]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之后很轻松的 ...
随机推荐
- 使用快捷键提升C#开发效率
好的工具能帮我们提升开发效率,能用工具去做的事情尽量使用工具,让我们的开发尽量自动化是提升开发效率的关键因素. 很多人都用过Resharper,也被Resharper超多的快捷键所折服,本篇文章我总结 ...
- 为友盟消息推送开发的PHP SDK（composer版）：可以按省发Android push
一直以来APP希望按省市县推送Android push,只能自己分析用户经纬度,打tag发送. 现在终于有服务商提供了. 友盟消息推送 可以“按省推送”,很方便. 我为友盟做了PHP SDK(comp ...
- 如何实现桌面App图标可以动态显示消息数(类似手机上的QQ图标)?
手机上的APP , 像QQ和微信等都可以在图标上动态显示消息数(最大99) , 那么你有没有想过这些效果是如何实现的?桌面上开发的传统应用程序能否也实现类似的功能? 1 思路 桌面快捷方式的图标本质上 ...
- HTML(.js) – 最简单的方式操作 DOM 的 JS 库
HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...
- 安装配置php5.4 win2003
php php-5.4.38 1.下载 http://windows.php.net/downloads/releases/php-5.4.38-Win32-VC9-x86.zip 解压到 D:\we ...
- 每次点击按钮后，判断页面是否已经有该行，没有弹出repeater的一行，并给他赋一个这行附值，没有则跳出
protected void btnAdd_click(object sender, EventArgs e) { try { //记录第几次追加 pressCount++; typeString.A ...
- iOS 代理反向传值
在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...
- AE常见接口之间的关系（较笼统）+arcgis常见概念
常见的接口有如下关系 IworkspaceFactory-------------->IworkSpace------------------>IfeatureWorkSpace ---- ...
- iOS运用fabric记录crash日志过程
先前运用友盟记录app闪退,发现有些闪退的记录无法明确定位到详细的位置,决定运用fabric进行闪退的记录:网上也有这方面的记录,有些细节的内容不明确,把今天碰到的坑整理记发不一下: 访问官网地址(进 ...
- 手机影音1--SplashActivity
/** * 1.设置被启动的Activity为单例模式 */ public class SplashActivity extends Activity { /** * 是否已经启动主页面 */ pri ...