js组件化1 input 框后span计算输入数字 

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>test</title>  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  <script>  

 var spanCount = (function(){
             var _bind = function(that){that.input.on('keyup',function(){that.render();}); };
             var _getNum = function(that){return that.input.val().length;};
             var spanFun = function(config){};
                 spanFun.prototype.init= function(config){this.input=$(config.id);_bind(this);return this;};
                 spanFun.prototype.render = function(){var num =_getNum(this);if(this.input.next('span').length==0){this.input.after('<span></span>');}; this.input.next().text(num+'个字');}
                 return spanFun;
     })();

$(function() {  
  new spanCount().init({id:'#J_input'}).render(); 
  new spanCount().init({id:'.input'}).render();
})  
 
  </script>  
</head>  
<body>  
<input type="text" id="J_input"/> 
<input type="text" class="input" />
</body>  
</html>

 

posted on 2016-07-19 10:03  dcw  阅读(365)  评论(0)    收藏  举报

导航