直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<title> Placeholder </title>
</head>
<body>
<input class="J_Placeholder" type="text" value=""/>
<textarea class="J_Placeholder"></textarea>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('.J_Placeholder').placeholder({
'txt': '请输入提示信息'
});
</script>
</body>
</html>
JS
/**
* @description: 表单input、textarea占位提示
* @author:[email protected]
* @update: 2014/11/10
*
* @param txt{string} 提示信息语句
*
* 用法
*
* $('.J_Placeholder').placeholder({
* 'txt': '请输入提示信息'
* });
*/ ;(function($){ var methods = {
init: function(opts){
this.isHtml5Placeholder() ? this.changeHtml5Placeholder(opts) : this.changePlaceholder(opts);
},
isHtml5Placeholder: function(){
var res = 'placeholder' in document.createElement('input');
return res;
},
changePlaceholder: function(opts){
opts.that.attr('value') == '' && opts.that.attr({
'value': opts.txt
}); opts.that
.on('focus', function(){
if($(this).val() === opts.txt){
$(this).attr('value', '');
}
})
.on('blur', function(){
if($(this).val() == ''){
$(this).attr({
'value': opts.txt
});
}
});
},
changeHtml5Placeholder: function(opts){
opts.that.attr({
'placeholder': opts.txt
});
}
}; $.fn.placeholder = function(opts){
opts = $.extend({
'that': this,
'txt': ''
}, opts || {});
methods.init(opts);
return this;
}; })(jQuery);