一个用js限制用户输入字节个数的问题.

80酷酷网    80kuku.com

　　js|问题

页面上有一个textarea(注意是多行的),现在需要用Js实现下面的功能.

1.只能输入一定字节的字符,比如允许的最大长度是10,那么只能输入10个字母或者5个 汉字(双字节的字符).
2.而且允许用户用退格键,delete键以及其他的非字符键.
3.必须同时支持ie和firefox,太低的版本可以不考虑. 
4.用户粘贴的时候也必须保证不会超过允许的最大长度,不能单单考虑用键盘输入.
5.以上功能是基于字节的,不是字符.

搞了老半天没有搞定,网上也没有特别好的资料.
如果有兄弟帮解决了,我可以放非技术分或者捐赠可用分.
谢谢!

---------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
function CutStrLength(str, Ilength)
{ 
var tmp = 0;
var len = 0;
var okLen = 0
for(var i=0;i<Ilength;i++)
{
if(str.charCodeAt(i)>255)
tmp += 2 
else
len += 1
okLen += 1
if(tmp + len == Ilength) 
{
return (str.substring(0,okLen));
break;
}
if(tmp + len > Ilength)
{
return (str.substring(0,okLen - 1) + " "); 
break;
}
}
}

function  checkFieldLength(fieldName,fieldDesc,fieldLength   )   
  {     

  var   str   = document.getElementById(fieldName).value;   
  var   theLen=0;   
var   teststr='';   
  for   (i=0;i<str.length;i++)   
  {   
  teststr=str.charAt(i);     
if(str.charCodeAt(i)>255)   
theLen=theLen   +   2;   
else   
  theLen=theLen   +   1;   
  }  
  document.getElementById('showMsg').innerText = theLen;
  if(   theLen>fieldLength   )   
  {  
  document.getElementById('showMsg').innerText = fieldDesc;
  //alert(fieldDesc+"   的字段长度超过规定长度！");   
  //document.getElementById(fieldName).focus();   
  document.getElementById(fieldName).value = CutStrLength(str, fieldLength);
  return   false;   
  }   
  else   
  {   
  return   true;   
  }   
  }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <FORM METHOD=POST ACTION="">
<TEXTAREA ID="testArea" NAME="testArea" ROWS="3" COLS="22" onkeyup="checkFieldLength('testArea', '超过允许输入的字符个数', 20);" ></TEXTAREA>
<div id="testInfo">已经输入:<span id="showMsg"></span></div>
  </FORM>
 </BODY>
</HTML>

---------------------------------------------------------------

客户一定要？你就捕捉那几个事件即可。在事件里判断字符数
关于中文、英文，可以参考
http://blog.csdn.net/net_lover/archive/2002/03/29/6898.aspx
---------------------------------------------------------------

<html>
<head>
<script language="javascript" type="text/javascript">
function isMaxLen(o){  
 var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"";  

var v = o.value;
var d = (v.match(/[\x00-\xff]/g) || "").length; //获取单字节个数
var s = v.length - d; //获取双字节个数

var allLen = d + s * 2 ;

 if(o.getAttribute && allLen >nMaxLen){  
 o.value=o.value.substring(0,nMaxLen/2)  
 }  
} 
</Script>
</head>
<body>
 <input typ="text" onkeyup="return isMaxLen(this)" ID="txtComment" MaxLength="10" TextMode="MultiLine" Height="90px" />
</body>
</html>

页面上有一个textarea(注意是多行的),现在需要用Js实现下面的功能.

1.只能输入一定字节的字符,比如允许的最大长度是10,那么只能输入10个字母或者5个 汉字(双字节的字符).
2.而且允许用户用退格键,delete键以及其他的非字符键.
3.必须同时支持ie和firefox,太低的版本可以不考虑. 
4.用户粘贴的时候也必须保证不会超过允许的最大长度,不能单单考虑用键盘输入.
5.以上功能是基于字节的,不是字符.

搞了老半天没有搞定,网上也没有特别好的资料.
如果有兄弟帮解决了,我可以放非技术分或者捐赠可用分.
谢谢!

---------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
function CutStrLength(str, Ilength)
{ 
var tmp = 0;
var len = 0;
var okLen = 0
for(var i=0;i<Ilength;i++)
{
if(str.charCodeAt(i)>255)
tmp += 2 
else
len += 1
okLen += 1
if(tmp + len == Ilength) 
{
return (str.substring(0,okLen));
break;
}
if(tmp + len > Ilength)
{
return (str.substring(0,okLen - 1) + " "); 
break;
}
}
}

function  checkFieldLength(fieldName,fieldDesc,fieldLength   )   
  {     

  var   str   = document.getElementById(fieldName).value;   
  var   theLen=0;   
var   teststr='';   
  for   (i=0;i<str.length;i++)   
  {   
  teststr=str.charAt(i);     
if(str.charCodeAt(i)>255)   
theLen=theLen   +   2;   
else   
  theLen=theLen   +   1;   
  }  
  document.getElementById('showMsg').innerText = theLen;
  if(   theLen>fieldLength   )   
  {  
  document.getElementById('showMsg').innerText = fieldDesc;
  //alert(fieldDesc+"   的字段长度超过规定长度！");   
  //document.getElementById(fieldName).focus();   
  document.getElementById(fieldName).value = CutStrLength(str, fieldLength);
  return   false;   
  }   
  else   
  {   
  return   true;   
  }   
  }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <FORM METHOD=POST ACTION="">
<TEXTAREA ID="testArea" NAME="testArea" ROWS="3" COLS="22" onkeyup="checkFieldLength('testArea', '超过允许输入的字符个数', 20);" ></TEXTAREA>
<div id="testInfo">已经输入:<span id="showMsg"></span></div>
  </FORM>
 </BODY>
</HTML>

---------------------------------------------------------------

客户一定要？你就捕捉那几个事件即可。在事件里判断字符数
关于中文、英文，可以参考
http://blog.csdn.net/net_lover/archive/2002/03/29/6898.aspx
---------------------------------------------------------------

<html>
<head>
<script language="javascript" type="text/javascript">
function isMaxLen(o){  
 var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"";  

var v = o.value;
var d = (v.match(/[\x00-\xff]/g) || "").length; //获取单字节个数
var s = v.length - d; //获取双字节个数

var allLen = d + s * 2 ;

 if(o.getAttribute && allLen >nMaxLen){  
 o.value=o.value.substring(0,nMaxLen/2)  
 }  
} 
</Script>
</head>
<body>
 <input typ="text" onkeyup="return isMaxLen(this)" ID="txtComment" MaxLength="10" TextMode="MultiLine" Height="90px" />
</body>
</html>

 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间

上一篇Web方式查询进度条实现

下一篇跨浏览器的设置innerHTML方法

相关文章

点击：