最经典的实现字符数控制的方案
当我们在ASP.NET开发时,经常会遇到一个头疼的问题:字符数的控制
由于数据库的字段长度是固定的,因此在进行字符输入时,最关键的就是控制字符的个数不能超过字段的长度,要不然,一个个异常会让人疯掉的。
对于单行文本框,不管是HTML控件还是Web控件,我们经常会使用MaxLength来控制,但这种控制无法控制到中文字符,即MaxLength=50的控制,可以输入50个英文与50个中文,这样的话,还是会导致中文字符数的溢出。
对于多行文本框,那就更惨了,使用MaxLenth根本不起作用的。
下面提供的方案优势:
1)最佳的方法是在文本框中输入时,控制到最大字数,超过时不能进行输入;
2)对于粘帖的情况也要能兼容,以前网上的方法不能控制到paste的情况;
3)对于最后的一个中文字符,宁愿舍去也不能多一个字符,比如50的字符数,在第49个时,最后输入一个中文,会导致最终字数为51,而这种情况,推荐是不能输入中文,保证最终的字符数<=50最佳,因为放弃一个中文字符总比数据库报错要好吧。
4)为了提高开发效率,尽可能的减少代码量,此方案不需要为文本框添加任何事件,而是由脚本块自己解决,因此只需要把脚本块饮包含到页面中就可以了,这应该是相当方便了吧
完善版修改:由于前一个方案中,一些输入法无法激活onpress事件,导致对于中文的不支持,现在采用onkeyup事件处理,在处理方式上也进行了修改,原来的onpress事件是进行输入控制,而onkeyup只能对已经输入后的字数进行字数判断,过长的进行截短处理。
在原方案中,有位朋友指出:数据采用n(type)系统不会报错,是的,如果采用n(type)的话,是以字符为基础的,可以不考虑数据库出错的可能性,但同样也存在一个界面显示的问题,比如界面上的Address值,希望是100个字符,如果不进行中英文字数区分,最多将输入100个中文,从而占200个字节空间,导致Adress在显示时会超过预料的空间,界面搞得不易控制。因此,此方案还是有可取之处的。
具体新方案实现:
1)将以下的代码包含到页面中:
<
script language
=
"
javascript
"
>
<!--
String.prototype.len
=
function
(){
return
this
.replace(
/
[
^
\x00
-
\xff]
/
g,
"
**
"
).length;
}
//
Set maxlength for multiline TextBox
function
setMaxLength(object,length)
{
var
result
=
true
;
var
controlid
=
document.selection.createRange().parentElement().id;
var
controlValue
=
document.selection.createRange().text;
var
tempString
=
object.value;
var
tt
=
""
;
for
(
var
i
=
0
;i
<
length;i
++
)
{
if
(tt.len()
<
length)
tt
=
tempString.substr(
0
,i
+
1
);
else
break
;
}
if
(tt.len()
>
length)
tt
=
tt.substr(
0
,tt.length
-
1
);
object.value
=
tt;
}
//
Check maxlength for multiline TextBox when paste
function
limitPaste(object,length)
{
var
tempLength
=
0
;
if
(document.selection)
{
if
(document.selection.createRange().parentElement().id
==
object.id)
{
tempLength
=
document.selection.createRange().text.len();
}
}
var
tempValue
=
window.clipboardData.getData(
"
Text
"
);
tempLength
=
object.value.len()
+
tempValue.len()
-
tempLength;
if
(tempLength
>
length)
{
tempLength
-=
length;
var
tt
=
""
;
for
(
var
i
=
0
;i
<
tempValue.len()
-
tempLength;i
++
)
{
if
(tt.len()
<
(tempValue.len()
-
tempLength))
tt
=
tempValue.substr(
0
,i
+
1
);
else
break
;
}
if
(tt.len()
<=
0
)
{
window.event.returnValue
=
false
;
}
else
{
tempValue
=
tt;
window.clipboardData.setData(
"
Text
"
, tempValue);
window.event.returnValue
=
true
;
}
}
}
function
PressLength()
{
if
(event.srcElement.type
==
"
text
"
||
event.srcElement.type
==
"
textarea
"
)
{
if(event.srcElement.length!=null)
setMaxLength(event.srcElement,event.srcElement.length);
}
}
function
LimitLength()
{
if
(event.srcElement.type
==
"
text
"
||
event.srcElement.type
==
"
textarea
"
)
{
if
(event.srcElement.length
!=
null
)
limitPaste(event.srcElement,event.srcElement.length);
}
}
document.documentElement.attachEvent('onkeyup', PressLength);
document.documentElement.attachEvent('onpaste', LimitLength);
//
-->
</
script
>
2)在需要控制的控件上添加length="n"(n为要控制的字数)即可,如:
<
INPUT
type
="text"
length
="3"
>
<
TEXTAREA
length
="20"
rows
="2"
cols
="20"
></
TEXTAREA
>
<
asp:TextBox
id
="TextBox1"
runat
="server"
length
="7"
></
asp:TextBox
>
<
asp:TextBox
id
="TextBox2"
runat
="server"
TextMode
="MultiLine"
length
="10"
></
asp:TextBox
>
上面是HTML控件与Web控件的例子,只要加一个length就可以了。
好了,大家可以体验一下了哦:
http://files.cnblogs.com/tintown/stringLenth3.rar (已经修改复了“没有length无法输入的问题”)
个人建议:1)可以把这个脚本块放在js文件中,进行引用即可
2)可以把脚本放在BasePage中,这样每个页面都可以使用了
3)可以使用这些脚本块,开发专门的服务器端控件,我没有时间开发,如果有朋友可以开发了发布一下哦!