一段非常不错的控制文本框输入文字长度的JS代码

13 篇文章 0 订阅
5 篇文章 0 订阅

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:mudoo>
    
<head>
        
<title>statInput 输入限制统计</title>
        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
<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 == nullreturn;   
 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  
= _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-12== "/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" id="DIV1">
            
<div class="title"><href="#" 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" id="DIV2">
            
<div class="title"><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>

 

转自:http://www.cnblogs.com/nacarat/archive/2008/12/22/1325656.html

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值