TextArea 控件的最大长度问题(js json)

如果只是单纯地想限制 textarea 中的字数，不想写太多的话，可用：

<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>

或

<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>

在 textarea 的 onkeyup 中检查字数之方法：


代码如下:

<script language="javascript" type="text/javascript">
function DjCheckMaxlength(oInObj)
{
var iMaxLen = parseInt(oInObj.getAttribute('maxlength'));
var iCurLen = oInObj.value.length;

if ( oInObj.getAttribute && iCurLen > iMaxLen )
{
oInObj.value = oInObj.value.substring(0, iMaxLen);
}
} //@ END OF DjCheckMaxlength()
</script>
<textarea maxlength="80" onkeyup="return DjCheckMaxlength(this);"></textarea>

o 设定好自动去检查所有的 textarea 之方法：


代码如下:

<head>
<script language="javascript" type="text/javascript">
function DjTextArea_AddMaxlengthAttr()
{
var aX = document.getElementsByTagName('textarea');

for ( var iI = 0; aX.length > iI; iI++ )
{
if ( aX[iI].getAttribute('maxlength') )
{
aX[iI].onkeyup = aX[iI].onchange = DjTextArea_CheckMaxlength;
}
}
} //@ END OF DjTextArea_AddMaxlengthAttr()

function DjTextArea_CheckMaxlength()
{
var iMaxLen = parseInt(this.getAttribute('maxlength'));
var iCurLen = this.value.length;

if ( this.getAttribute && iCurLen > iMaxLen )
{
this.value = this.value.substring(0, iMaxLen);
}
} //@ END OF DjTextArea_CheckMaxlength()
</script>
</head>

<body onload="DjTextArea_AddMaxlengthAttr();">

代码如下:

var Inputs = {

OnIntegerOnly: function() {
var k = System.isIE ? event.keyCode : event.which;

if(event.ctrlKey || event.ctrlAlt || event.shiftKey) {
Inputs.DisableInput(event);
return;
}

if ( ( k < 48 || k > 57 )
&& 8 != k
&& 9 != k
&& 46 != k
&& 37 != k
&& 39 != k
&& 16 != k
&& 36 != k
&& 35 != k
&& 17 != k
&& 13 != k
&& ( k < 96 || k > 105 )
) {
Inputs.DisableInput(event);
}

return k;
},

OnDecimalOnly: function() {
var k = System.isIE ? event.keyCode : event.which;

if(event.ctrlKey || event.ctrlAlt || event.shiftKey) {
Inputs.DisableInput(event);
return;
}

if( ( k < 48 || k > 57 )
&& 8 != k
&& 9 != k
&& 46 != k
&& 37 != k
&& 39 != k
&& 16 != k
&& 36 != k
&& 35 != k
&& 17 != k
&& 13 != k
&& 190 != k
&& 110 != k
&& ( k < 96 || k > 105 )
) {
Inputs.DisableInput(event);
}

return k;
},

OnAsciiOnly: function() {
var k = System.isIE ? event.keyCode : event.which;

if ( ( k < 97 || k > 122 )
&& ( k < 65 || k > 90 )
&& ( k < 48 || k > 57 )
&& 8 != k
&& 9 != k
&& 46 != k
&& 37 != k
&& 39 != k
&& 16 != k
&& 36 != k
&& 35 != k
&& 17 != k
&& 13 != k
&& 189 != k
&& 187 != k
) {
Inputs.DisableInput(event);
}

return k;
},

DisableInput: function(event) {
if(System.isIE)
event.returnValue = false;
else
event.preventDefault();
},

AddOnPos: function(obj, charvalue) {
//obj代表要插入字符的输入框

//value代表要插入的字符

obj.focus();
var r = document.selection.createRange();
var ctr = obj.createTextRange();
var i;
var s = obj.value;

//注释掉的这种方法只能用在单行的输入框input内

//对多行输入框textarea无效
//r.setEndPoint("StartToStart", ctr);
//i = r.text.length;
//取到光标位置----Start----
var ivalue = "&^asdjfls2FFFF325%$^&";
r.text = ivalue;
i = obj.value.indexOf(ivalue);
r.moveStart("character", -ivalue.length);
r.text = "";
//取到光标位置----End----
//插入字符
obj.value = s.substr(0,i) + charvalue + s.substr(i,s.length);
ctr.collapse(true);
ctr.moveStart("character", i + charvalue.length);
ctr.select();
},

MaxLength: function() {
var _this = event.srcElement;
var iMaxLen = parseInt(_this.getAttribute('maxlength'));

switch(event.type) {
case 'beforepaste': {
event.returnValue = false;
} break;

case 'paste': {
var iTxtLen = _this.value.lenUTF8();
var txtCbd = window.clipboardData.getData("Text");
var iCbdLen = txtCbd.lenUTF8();
if((iMaxLen - iTxtLen) <= iCbdLen) {
var iSurplusLen = iMaxLen - iTxtLen;
var subStr = txtCbd.substr(0, iSurplusLen);
var insertStr = '';
for(var i = 0; i < subStr.length; i++) {
var chr = subStr.substr(i, 1);
if(iSurplusLen >= chr.lenUTF8()) {
insertStr += chr;
iSurplusLen -= chr.lenUTF8();
}
}

Inputs.AddOnPos(_this, insertStr);
//_this.style.backgroundColor = 'red';
//System.setTimeout(Inputs.ColorTips, 500, _this);
event.returnValue = false;
event.srcElement.style.imeMode = 'disabled';
} else {
event.returnValue = true;
event.srcElement.style.imeMode = 'auto';
}
} break;

case 'keypress': {
var iTxtLen = _this.value.lenUTF8();
if(iMaxLen <= iTxtLen) {
while(_this.value.lenUTF8() > iMaxLen) {
_this.value = _this.value.substr(0, _this.value.length - 1);
}
Inputs.DisableInput(event);
if('disabled' != event.srcElement.style.imeMode) {
event.srcElement.style.imeMode = 'disabled';
}
}
else {
if('auto' != event.srcElement.style.imeMode) {
event.srcElement.style.imeMode = 'auto';
}
}
} break;

case 'keyup': {
var k = System.isIE ? event.keyCode : event.which;

if (8 != k
&& 9 != k
&& 46 != k
&& 37 != k
&& 39 != k
&& 16 != k
&& 36 != k
&& 35 != k
&& 17 != k
&& 13 != k
&& 189 != k
&& 187 != k
) {
if(_this.getAttribute) {
_this.fireEvent('onkeypress');
}
}
} break;

case 'keydown': {
var k = System.isIE ? event.keyCode : event.which;

if (8 != k
&& 9 != k
&& 46 != k
&& 37 != k
&& 39 != k
&& 16 != k
&& 36 != k
&& 35 != k
&& 17 != k
&& 13 != k
&& 189 != k
&& 187 != k
) {
var iTxtLen = _this.value.lenUTF8();
if(iMaxLen <= iTxtLen) {
Inputs.DisableInput(event);
}
}
} break;
}
},

TextAreaMaxLength: function() {

var aX = document.getElementsByTagName('textarea');
for(var i = 0; i < aX.length; i++) {
if(aX[i].getAttribute('maxlength')) {
aX[i].detachEvent('onbeforepaste', Inputs.MaxLength);
aX[i].detachEvent('onpaste', Inputs.MaxLength);
aX[i].detachEvent('onkeypress', Inputs.MaxLength);
aX[i].detachEvent('onkeyup', Inputs.MaxLength);
aX[i].detachEvent('onkeydown', Inputs.MaxLength);

aX[i].attachEvent('onbeforepaste', Inputs.MaxLength);
aX[i].attachEvent('onpaste', Inputs.MaxLength);
aX[i].attachEvent('onkeypress', Inputs.MaxLength);
aX[i].attachEvent('onkeyup', Inputs.MaxLength);
aX[i].attachEvent('onkeydown', Inputs.MaxLength);
/*
var res = 'zh-cn' == window.navigator.systemLanguage
? '最大长度：'
: 'Maximum length for: ';

if('' == aX[i].title) aX[i].title = res + aX[i].getAttribute('maxlength');
*/
}
}
},

TextBoxMaxLength: function() {
var aX = document.getElementsByTagName('input');
for(var i = 0; i < aX.length; i++) {
var maxLen = aX[i].getAttribute('maxlength');
if('text' == aX[i].type
&& null != maxLen
&& '' != maxLen
&& undefined != maxLen
&& 2147483647 > parseInt(maxLen)
&& '' == aX[i].title) {

aX[i].detachEvent('onbeforepaste', Inputs.MaxLength);
aX[i].detachEvent('onpaste', Inputs.MaxLength);
aX[i].detachEvent('onkeypress', Inputs.MaxLength);
aX[i].detachEvent('onkeyup', Inputs.MaxLength);

aX[i].attachEvent('onbeforepaste', Inputs.MaxLength);
aX[i].attachEvent('onpaste', Inputs.MaxLength);
aX[i].attachEvent('onkeypress', Inputs.MaxLength);
aX[i].attachEvent('onkeyup', Inputs.MaxLength);
/*
var res = 'zh-cn' == window.navigator.systemLanguage
? '最大长度：'
: 'Maximum length for: ';

aX[i].title = res + aX[i].getAttribute('maxlength');
*/
}
}
}
}

Tools.Inputs = Inputs;

window.attachEvent('onload', Tools.Inputs.TextAreaMaxLength);
window.attachEvent('onload', Tools.Inputs.TextBoxMaxLength);

赞 (0)

相关推荐

  • js限制textarea每行输入字符串长度的代码

    但是textarea没有这个属性. asp.net的服务端textbox这个属性也不起效,所以我们只有用js脚本来控制 好,废话不多说,先上代码 javascipt源码: 复制代码 代码如下: function textCounter(field, maxlimit, lines) {//参数说明:field是textarea对象,maxlimit是最大允许长度,lines是行数 var arr = field.value.split("\n");//首先我们要为验证行数,通过分行符&

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,但修改起来就麻烦啊,不过对于js爱好者来说是个不错的参考,通过读取属性值进行控制. textarea字数限制 练习代码多有参考网络 by ahuinan var TextUtil = new Object(); TextUtil.NotMax = function(oTextArea){ var maxText = oTextArea.getAttribute("maxlength"); if(oTextAr

  • 将text的中的值，增加到textarea的js代码

    将text的中的值，增加到textarea的js代码

    效果如图所示: function Addother() { if(document.form1.ourl.value==""||document.form1.ourl.value=="http://"){ alert('网址不能为空!'); return ;} if(document.form1.oname.value==""){ alert('名称不能为空!'); return ;} document.form1.xiangguanid2.va

  • JavaScript动态调整TextArea高度的代码

    核心代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function adjustObjHeight(obj, defaultHeight) { if(obj.scrollHeight > defaultHeight) { obj.style.height = obj.scrollHeight + 'px'; } else { obj.style.height

  • 签名框（Textarea）限制文字数量并适时提示

    当输入的字符达到 限制后,就不能再输入了,你输入一个,会被程序删除一个,有意思吧? 文本框输入限制 0/10 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 获取 textarea 标签第n行的文字的js代码

    1.我们 欢迎大家 2.最近增加了不少的服务器,提供更好的速度 3.网速实在太慢了 str=document.getElementById("textareaobj").value;//获取文本域内容 if(document.all){ // 如果是IE,怎么判断浏览器类型,自己找代码 arr=str.split("\r\n"); }else{ // firfox arr=str.split("\n"); } // 取得第n行内容,注n从0开始

  • js textarea自动增高并隐藏滚动条

    复制代码 代码如下: <textarea id="tValue" style="overflow-y:hidden; height:20px;" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

  • 用JavaScript限制textarea输入长度 (For: IE、Firefox ...)[

    Code:用JavaScript限制textarea输入长度 (For: IE.Firefox ...) body {font-size:14px;} maxlength=10 maxlength=20 function isMaxLen(o){ var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):""; if(o.getAttribute && o.value.leng

  • TextArea 控件的最大长度问题(js json)

    如果只是单纯地想限制 textarea 中的字数,不想写太多的话,可用: <textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea> 或 <textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea> 在 textarea 的 onkeyup 中检查字数之方法:

  • jQuery控制控件文本的长度的操作方法

    在Web项目开发中,有时候会碰到这样一个问题,控件被文本内容撑爆了,但是怎么控制控件文本的的内容呢?可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件的宽度时,有时候并不起作用,除非你很精通CSS,否则很难通过CSS控制控件中的文本内容,下面的方法可以解决这个问题. HTML内容,h2中的文本通过jQuery控

  • 控件开发时两种JS嵌入资源方式的使用方法

    第一种: 直接把要嵌入的JS文件属性设置为"嵌入的资源".protected override void OnInit(EventArgs e) {       base.OnInit (e);        if(!base.Page.IsStartupScriptRegistered("Script"))         {                 Assembly assembly = typeof(TestControl).Assembly;    

  • 让textarea控件的滚动条怎是位与最下方

    同过函数向texterea控件中添加内容后,如何怎是让它的滚动条怎是移动到最底部? 1楼 有谁知道吗? 2楼 <textarea   name="textarea"   cols="80"   rows="10"       style="overflow-y:hidden;   overflow-x:scroll;"></textarea> 3楼 <body>      <texta

  • 网页WEB打印控件制作

    网页WEB打印控件制作

    在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件事件,本文将自己开发编写的C# 制作的HTML打印插件分享出来,让有同样需求的朋友提供一个参考:此插件是基于Microsoft .NET Framework 2.0 开发的,缺点是每台客户端在安装插件时,必须要安装Microsoft .NET Framework 2.0 :本插件能实现 页眉.页脚.表头.标题.表尾的分

  • jQuery实现ajax无刷新分页页码控件

    jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • BootStrap的双日历时间控件使用

    BootStrap的双日历时间控件使用

    这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图   接下来是代码实现 第一步当然是导入css.js之类的文件啦 <link href="assets/css/icons.css" rel="external nofollow" rel="stylesheet" /> 后面那个时期样式图片样式 <link href="

  • jquery网页日历显示控件calendar3.1使用详解

    jquery网页日历显示控件calendar3.1使用详解

    关于日历控件,我做了好多次尝试,一直致力于开发一款简单易用的日历控件.我的想法是争取在引用这个控件后,用一行js代码就能做出一个日历,若在加点参数,就能自定义外观和功能丰富多彩的日历.Calendar 3.1是我初步满意的一个作品. 日历的常用场景有两种,一种是用在日期选择器里面,比如某个位置需要输入日期,点一下输入框会弹出一个日历以供选择日期:另一种是单纯的显示作用,在页面某个地方显示日历,一般起装饰作用,很多博客首页都会有这种日历.我前面的随笔介绍的都是第一种日历,而今天要介绍的Calend

  • Textbox控件注册回车事件及触发按钮提交事件具体实现

    引子: 在ASP.Net页面中textbox的index为1(或n),其后的提交按钮index为2(n+1),光标在textbox中,回车后自动焦点移动到后面的button上,会触发button的点击事件. 但在Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况(应该是自动切换焦点). 由于并且该服务端TextBox控件没有提供OnKeyPress或OnKeyDown等事件,也无法针对回车事件写后台代码来调用Button按钮的点击事件. 于是上网

  • Vue自定义日历小控件使用方法详解

    Vue自定义日历小控件使用方法详解

    本文实例为大家分享了Vue自定义日历小控件的具体代码,供大家参考,具体内容如下 废话少说,先上效果图: 可以在效果图中看到,选择不同的月份的时候当月天数与星期几都是一一对应,非当月天数则是灰色显示,一目了然. 并且此日历控件支持自动确定当前时间,每次打开默认显示的就是最新的月份,用来做签到打卡的功能比较合适. 由于使用的是原生div进行制作,自定义功能非常强,可以自由的更换样式.背景.颜色.大小等等. 在与数据库的时候可以从数据库获得时间信息并填充到控件中,图中的色块就可以看出. 该控件使用了V

随机推荐