如何check jsp文字框中可以输入字符串的byte数
页面上有一个text框。
<input type=text size=30 Maxlength="20" ID="value" name="value">
这样的话里面既可以输入20个半角，又可以输入20个全角。
我想要的样子是：不管全角半角，只允许输入20个byte。否则弹出message。
该怎么实现呢？
[解决办法]
- HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>试试 </title>
</head>
<script type="text/javascript">
var INPUT_BORDER_COLOR = 'mediumseagreen';
var INPUT_BORDER_ERROR = 'red';
var INPUT_BGCOLOR = 'lemonchiffon';
var INPUT_DEFAULT_BGCOLOR = 'white';
var INPUT_DEFAULT_BORDER_COLOR = 'silver';
window.$ = function(id) {
if(typeof id == 'string') {
return document.getElementById(id);
}
return id;
}
function chanageBackColor(tag) {
var txts = document.getElementsByTagName(tag);
for(var i = 0; i < txts.length; i++) {
if(tag == 'input' && txts[i].type != 'text') {
continue;
}
txts[i].isfocus = false;
txts[i].onmouseover = function() {
this.style.backgroundColor = INPUT_BGCOLOR;
}
txts[i].onfocus = function() {
this.isfocus = true;
this.style.backgroundColor = INPUT_BGCOLOR;
if(!this.hasError) {
this.style.borderColor = INPUT_BORDER_COLOR;
}
}
txts[i].onmouseout = function() {
if(!this.isfocus) {
this.style.backgroundColor = INPUT_DEFAULT_BGCOLOR;
}
}
txts[i].onblur = function() {
this.style.backgroundColor = INPUT_DEFAULT_BGCOLOR;
if(!this.hasError) {
this.style.borderColor = INPUT_DEFAULT_BORDER_COLOR;
}
this.isfocus = false;
}
}
}
window.onload = function() {
chanageBackColor('input');
chanageBackColor('textarea');
}
var checkObjs = [
{id: 'name', len: 20, eid: 'nameMsg', msg : '名字不能超过 20 个字节'},
{id: 'page', len: 50, eid: 'pageMsg', msg : '主页不能超过 50 个字节'},
{id: 'code', len: 6, eid: 'codeMsg', msg : '验证码不能超过 6 个字符'},
{id: 'comment', len: 100, eid: 'commentMsg', msg : '评论内容不能超过 100 个字节'}
];
function tooLong(s, length) {
var len = 0;
for(var i = 0; i < s.length; i++) {
if(s.charCodeAt(i) > 0xff) {
len += 2;
} else {
len++;
}
}
return len > length;
}
function check() {
var b = true;
for(var i = 0; i < checkObjs.length; i++) {
var obj = checkObjs[i];
var c = tooLong($(obj.id).value, obj.len);
b = b && !c;
if(c) {
$(obj.eid).innerHTML = obj.msg;
$(obj.id).style.borderColor = INPUT_BORDER_ERROR;
$(obj.id).hasError = true;
} else {
$(obj.eid).innerHTML = '';
$(obj.id).style.borderColor = INPUT_DEFAULT_BORDER_COLOR;
$(obj.id).hasError = false;
}
}
if(!b) {
alert('输入错误啦，不能提交哦 :-)');
}
return b;
}
</script>
<style type="text/css">
form table {
font-size: 10pt;
}
form table span {
color: red;
padding-left: 5px;
}
form table td.top {
vertical-align: top;
}
form table td.td-r {
text-align: right;
}
input.txt {
width: 300px;
border: 1px solid #c0c0c0;
padding: 2px 2px;
}
textarea {
font-size: 10pt;
height: 100px;
width: 300px;
border: 1px solid #c0c0c0;
overflow-y: auto;
padding: 2px;
}
</style>
<body>
<form name="frm" method="post" action="#" onsubmit="return check();">
<table>
<tr>
<td class="td-r">姓名： </td>
<td> <input type="text" name="name" id="name" class="txt"> </td>
<td> <span id="nameMsg"> </span> </td>
</tr>
<tr>
<td class="td-r">主页： </td>
<td> <input type="text" name="page" id="page" class="txt"> </td>
<td> <span id="pageMsg"> </span> </td>
</tr>
<tr>
<td class="td-r">验证码： </td>
<td> <input type="text" name="code" id="code" class="txt"> </td>
<td> <span id="codeMsg"> </span> </td>
</tr>
<tr>
<td class="td-r top">内容： </td>
<td> <textarea name="comment" id="comment"> </textarea> </td>
<td class="top"> <span id="commentMsg"> </span> </td>
</tr>
<tr>
<td> </td>
<td> <input type="submit" value="确定"> </td>
</tr>
</table>
</form>
</body>
</html>