一個用js限制使用者輸入位元組個數的問題.

來源:互聯網
上載者:User
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>

 



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。