<!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>
//来源：http://blog.csdn.net/joyous/article/details/51908058
/*********************************原始方法******************************/
// var input = $('#J_input');
// //获取数字
// function getNum(){
// return input.val().length;
// }
// //渲染元素
// function render(){
// var num = getNum();
// if ($('#J_input_count').length == 0) {
// input.after('<span id="J_input_count"></span>');
// }
// $("#J_input_count").html(num+'个字');
// }
// //监听事件
// input.on('keyup',function(){
// render();
// });
// //初始化渲染
// render();
/*********************************作用域隔离******************************/
// var textCount = {
// input:null,
// init:function(config){
// this.input = $(config.id);
// this.bind();
// return this;
// },
// bind:function(){
// var self = this;
// this.input.on('keyup',function(){
// self.render();
// });
// },
// getNum:function(){
// return this.input.val().length;
// },
// //渲染元素
// render:function(){
// var num = this.getNum();
// if ($('#J_input_count').length == 0) {
// this.input.after('<span id="J_input_count"></span>');
// };
// $("#J_input_count").html(num+'个字');
// }
// }
// $(function(){
// textCount.init({id:'#J_input'}).render();
// });
/*********************************闭包写法******************************/
var TextCount = (function(){
//私有方法，外面将访问不到
var _bind = function(that){
that.input.on('keyup',function(){
that.render();
});
}
var _getNum = function(that){
return that.input.val().length;
}
var TextCountFun = function(config){
}
TextCountFun.prototype.init = function(config){
this.input = $(config.id);
_bind(this);
return this;
}
TextCountFun.prototype.render = function(){
var num = _getNum(this);
if ($('#J_input_count').length == 0) {
this.input.after('<span id="J_input_count"></span>');
};
$("#J_input_count").html(num+'个字');
}
//返回构造函数
return TextCountFun;
})();
$(function() {
new TextCount().init({id:'#J_input'}).render();
})
</script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>
网友评论