您的位置:首页 > 其它

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

2015-12-10 23:52 633 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: