自定义placeholder插件,实现设置input默认提示内容,颜色

<input id="focusId" type="text" style="height: 40px;width: 80%;border: 1px solid #777e8c;">
<script>
//插件(兼容jQuery和zepto,同时适用于文本框和div输入【需要设置inputType】)
;(function ($) {
$.fn.placeholder=function(options){
var self=this;
options= $.extend({
defaultContent:"defaultContent",
defaultColor:"#777e8c",
inputColor:"#000",
inputType:true
},options);
var type=options.inputType?"value":"innerHTML";
this[0][type]=options.defaultContent;
self.css("color",options.defaultColor);
this.focus(function(){
if(this[type]==options.defaultContent){
self[0][type]="";
self.css("color",options.inputColor);
}else{}
}).blur(function(){
if(!this[type]){
self[0][type]=options.defaultContent;
self.css("color",options.defaultColor);
}else{}
});
}
})(window.jQuery || window.Zepto);
//调用
$("#focusId").placeholder({
defaultContent:"说点什么获取需求方的信任…示例:您好,非常荣幸…你到底行不行",
defaultColor:"#c6c6c6",
inputColor:"#000"
});
</script>
posted on 2015-12-10 23:52  菜鸟阿文  阅读(463)  评论(0编辑  收藏  举报