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

來源:互聯網
上載者:User

http://blog.csdn.net/jackeyabc/archive/2007/04/11/1561117.aspx

 

http://topic.csdn.net/u/20070316/14/6A6D551E-1C7B-4A9E-A2AC-64E15E501AD3.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);" onchange="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);" onchange="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>

 

 

 

 

統計判斷目前使用者輸入的位元組數以區分漢字和字母

http://www.okajax.com/a/200812/1222S192008.html

 

 

 

系統中有時候會遇到這種情況:讓使用者輸入某一項內容,只允許輸入5個漢字或者10個字元,這時,我們單純的通過“document.cnwebform.title.value.length”是無法判斷漢字的,只能通過統計位元組數來判斷了。如下:/**
 * 統計字串位元組數
 *
 * return integer
 */
String.prototype.ByteCount = function()
{
 txt = this.replace(/(<.*?>)/ig,'');
 txt = txt.replace(/([u0391-uFFE5])/ig, '11');
 var count = txt.length;
 return count;
} 通過以上函數我們就可以統計使用者輸入的位元組數了,調用方法:var count = document.cnwebform.title.value.ByteCount(); count就是使用者輸入的位元組數,因為漢字佔用兩個位元組,我們就可以統計出來漢字和字元的數目了:if ( count < 10|| count > 20) {
  alert("字數限定在5~10個漢字,或者10~20個英文字元。");}
相關文章

聯繫我們

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.