<script>
function getStringUTFLength(str) {
var value = str.replace(/[^\x00-\xff]/g,
" ");
return value.length;
}
function leftUTFString(str,len) {
if(getStringUTFLength(str)<=len)
return str;
var value = str.substring(0,len);
while(getStringUTFLength(value)>len) {
value = value.substring(0,value.length-1);
}
return value;
}
function count() {
var value = document.getElementById(
"licenseother").value;
value = value.replace(/[\u4e00-\u9fa5]/g,
" ");
//alert(value.length);
if(value.length>=255) {
with(window.event) {
cancelBubble =
true;
keyCode=0;
returnValue =
false;
}
document.getElementById(
"licenseother").value = leftUTFString(document.getElementById(
"licenseother").value,8);
}
document.getElementById(
"result").value = 255-getStringUTFLength(document.getElementById(
"licenseother").value);
}
</script>
<table width=
"100%">
<tr><td>
本輸入框限制輸入255個字符(漢字計算為2個字符：)
</td></tr>
<tr><td>
<textarea cols=80 rows=3 wrap=
"virtual" id=
"licenseother" onkeypress=
"count()" onkeyup=
"count()" onblur=
"count();" onChange=
"count();"></textarea>
</td></tr>
<tr><td>
剩余字符數：<input type=
"text" size=
"3" id=
"result" value=
"255">
</td></tr>
</table>
}
示例如下：
//
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:mudoo>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>statInput 輸入限制統計</title>
<style type="text/css">
<!--
* {}{padding: 0; margin: 0}
body {}{margin: 3em; font: 12px Tahoma; background: #EAEAEA; color: #333333; line-height: 20px}
input, textarea {}{font: 12px Tahoma; color: #666666; padding: 2px; border: solid 1px #DBDBDB}
textarea {}{padding: 5px; line-height: 20px}
p {}{margin: 1em 0}
ul {}{}
li {}{height: 1%; overflow: hidden; list-style-type: none}
a {}{color: #666666; text-decoration: none}
a:hover {}{color: #333333}
.r {}{float: right}
.l {}{float: left}
.b {}{font-weight: bold}
.gray {}{color: #666666; margin-top: 8px}
.light {}{color:#FF6600; margin: 0 5px}
.case {}{display: block; padding: 0 2em 2em 2em; border: solid 1px #EAEAEA; background: #FFFFFF; margin-bottom: 2em; height: 1%; overflow: hidden}
.title {}{display:block; padding: .5em 2em .5em 1em; margin: 0 -2em 2em -2em; font-weight: bold; color: #000000; background: #FAFAFA; border-bottom: solid 1px #EAEAEA}
.call {}{display:block;}
.key {}{display: block; width: 6em; float: left}
.type {}{display: block; width: 6em; float: left}
.info {}{padding-left: 2em}
.demo {}{margin-bottom: 2em}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
// 這里都是公用函數，挺多的
var
// 獲取元素
$ = function(element) {
return (typeof(element) == 'object' ? element : document.getElementById(element));
},
// 判斷瀏覽器
brower = function() {
var ua = navigator.userAgent.toLowerCase();
var os = new Object();
os.isFirefox = ua.indexOf ('gecko') != -1;
os.isOpera = ua.indexOf ('opera') != -1;
os.isIE = !os.isOpera && ua.indexOf ('msie') != -1;
os.isIE7 = os.isIE && ua.indexOf ('7.0') != -1;
return os;
},
// 事件操作(可保留原有事件)
eventListeners = [],
findEventListener = function(node, event, handler){
var i;
for (i in eventListeners){
if (eventListeners[i].node == node && eventListeners[i].event == event && eventListeners[i].handler == handler){
return i;
}
}
return null;
},
myAddEventListener = function(node, event, handler){
if (findEventListener(node, event, handler) != null){
return;
}
if (!node.addEventListener){
node.attachEvent('on' + event, handler);
}else{
node.addEventListener(event, handler, false);
}
eventListeners.push({node: node, event: event, handler: handler});
},
removeEventListenerIndex = function(index){
var eventListener = eventListeners[index];
delete eventListeners[index];
if (!eventListener.node.removeEventListener){
eventListener.node.detachEvent('on' + eventListener.event,
eventListener.handler);
}else{
eventListener.node.removeEventListener(eventListener.event,
eventListener.handler, false);
}
},
myRemoveEventListener = function(node, event, handler){
var index = findEventListener(node, event, handler);
if (index == null) return;
removeEventListenerIndex(index);
},
cleanupEventListeners = function(){
var i;
for (i = eventListeners.length; i > 0; i--){
if (eventListeners[i] != undefined){
removeEventListenerIndex(i);
}
}
};
-->
</script>
<script language="javascript" type="text/javascript">
<!--
/**//*======================================================
- statInput 輸入限制統計
- By Mudoo 2008.5
- 長度超出_max的話就截取貌似沒有更好的辦法了
======================================================*/
function statInput(e, _max, _exp) {
e = $(e);
_max = parseInt(_max);
_max = isNaN(_max) ? 0 : _max;
_exp = _exp==undefined ? {} : _exp;
if(e==null || _max==0) {
alert('statInput初始化失敗！');
return;
}
var
// 瀏覽器
_brower = brower();
// 輸出對象
_objMax = _exp._max==undefined ? null : $(_exp._max),
_objTotal = _exp._total==undefined ? null : $(_exp._total),
_objLeft = _exp._left==undefined ? null : $(_exp._left),
// 彈出提示
_hint = _exp._hint==undefined ? null : _exp._hint;
// 初始統計
if(_objMax!=null) _objMax.innerHTML = _max;
if(_objTotal!=null) _objTotal.innerHTML = 0;
if(_objLeft!=null) _objLeft.innerHTML = 0;
// 設置監聽事件
// 輸入這個方法比較好.
// 但是Opera下中文輸入跟粘貼不能正確統計相當BT的東西
// 如果不考慮Opera的話就用這個吧.否則就老老實實用計時器.
if(_brower.isIE) {
myAddEventListener(e, "propertychange", stat);
}else{
myAddEventListener(e, "input", stat);
}
/**//*
// 用計時器的話就什么瀏覽器都支持了.
var _intDo = null;
myAddEventListener(e, "focus", setListen);
myAddEventListener(e, "blur", remListen);
function setListen() {
_intDo = setInterval(stat, 10);
}
function remListen() {
clearInterval(_intDo);
}
*/
// 統計函數
var _len, _olen, _lastRN, _sTop;
_olen = _len = 0;
function stat() {
_len = e.value.length;
if(_len==_olen) return; // 防止用計時器監聽時做無謂的犧牲
if(_len>_max) {
_sTop = e.scrollTop;
// 避免IE最后倆字符為'\r\n'.導致崩潰
_lastRN = (e.value.substr(_max-1, 2) == "\r\n");
e.value = e.value.substr(0, (_lastRN ? _max-1 : _max));
if(_hint==true) alert("悟空你也太調皮了，為師跟你說過，叫你不要輸那么多字~~.");
// 解決FF老是跑回頂部
if(_brower.isFirefox) e.scrollTop = e.scrollHeight;
}
_olen = _len = e.value.length;
// 顯示已輸入字數
if(_objTotal!=null) _objTotal.innerHTML = _len;
// 顯示剩余可輸入字數
if(_objLeft!=null) _objLeft.innerHTML = (_max-_len)<0 ? 0 : (_max-_len);
}
stat();
}
-->
</script>
<script language="javascript" type="text/javascript">
<!--
/**//*********************************************
- statInput 演示函數
*********************************************/
myAddEventListener(window, "load", testStatInput);
function testStatInput(){
statInput('Test_1', 100, {_max : 'stat_max', _total : 'stat_total', _left : 'stat_left', _hint : true});
}
-->
</script>
</head>
<body>
<div class="case">
<div class="title"><a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" class="r">Top</a>statInput 調用方法</div>
<div class="b">statInput(Element, MaxLen, {objMax, objTotal, objLeft, Hint});</div>
<ul class="info gray">
<li><span class="key">Element：</span><span class="type">Object</span>限制統計對象 (*必須)</li>
<li><span class="key">MaxLen：</span><span class="type">Number</span>最大可輸入長度 (*必須)</li>
<li><span class="key">objMax：</span><span class="type">Object</span>顯示最大輸入長度對象 (*可選)</li>
<li><span class="key">objTotal：</span><span class="type">Object</span>顯示輸入統計對象 (*可選)</li>
<li><span class="key">objLeft：</span><span class="type">Object</span>顯示可輸入長度對象 (*可選)</li>
<li><span class="key">Hint：</span><span class="type">Boolean</span>當長度超出上限時，是否提示 (*可選)</li>
</ul>
</div>
<div class="case">
<div class="title"><a href="#" class="r">Top</a>statInput 演示</div>
<textarea name="Test_1" id="Test_1" rows="10" style="width: 99%" >悟空你也太調皮了，我跟你說過，叫你不要亂扔東西， 亂扔東西這么做…… （咣當，悟空棍子掉在地上） 你看我還沒有說完呢你把棍子又給扔掉了！月光寶盒是寶物，你把他扔掉會污染環境，唉，要是砸到小朋友那怎么辦？就算沒有砸到小朋友砸到那些花花草草也是不對的呀！</textarea>
<div class="gray">最多可輸入<span id="stat_max" class="b light"></span>，當前共<span id="stat_total" class="b light"></span>，還可輸入<span id="stat_left" class="b light"></span></div>
</div>
</body>
</html>