标签：style blog http color io os ar java for
在项目中，input 和 textarea标签要用到提示，当初是用value来模拟的，虽然可以达到这个效果，但是每一个还绑定了onblur和onfocus事件，这样一来 提交数据的时候验证就是个麻烦事了，input text还好一些，失去焦点是就可以用defaultvalue来搞，textarea就麻烦了，没有defaultvalue这个属性。
没有defaultvalue都是小事，我们项目用到了jquery.validationEngine验证框架，如果用框架来验证的话，那么就不能用value来模拟提示了，所以 干脆就找一个网上的placeholder插件来实现提示，搞到项目中，可以了，运行一看，虽然可以用，但是还是达不到我们想要的效果（兼容效果：只要一获得焦点，提示就消失），Firefox默认是onInput才消失，我就想改改那个插件的代码，尼玛，看不懂啊，Google... 看到了一篇关于开发jQuery插件的博文，受益匪浅啊，在此推荐给还不会的童鞋，地址是：http://javascript.ruanyifeng.com/jquery/plugin.html，这篇博文虽然短小，但是精悍啊，做到了授人以鱼不如授人以渔，通俗易懂，非常感谢。
前面的大多是屁话，不过那篇博文看看还是对我们这些小菜鸟开发jQuery插件还是很有用的，不多说了，ie支持的placeholder插件代码如下：
/**
* 兼容placeholder,如果判断是没有能力实现placeholder的浏览器，则默认用span标签来模拟提示
* 用法：在标签上写上placeholder属性，如果标签是textarea的话，那么就需要在写一个属性maxwidth（提示最短长度）
* 作者：cjw
* 时间：2014年9月27日15:44:38
* */
;$(function ($){
$.fn.placeholder = function (optons){
var settings = $.extend({
placeholderColorToOther:"#444", // Firefox 提示文字颜色
placeholderColorToIe:"#9a9a9a", // ie 提示文字颜色
onInputHide:false // 采用支持placeholder浏览器的placeholder效果，单开始输入的时候，才隐藏提示，默认为false
},optons);
return this.each(function (i,obj){
var isCan = "placeholder" in document.createElement("input");
if (isCan){ // 可以
// 一加载的颜色
if ($(obj).val() == ""){
$(obj).css("color",settings.placeholderColorToOther);
}else {
$(obj).css("color","#000"); // 黑色
}
if (!settings.onInputHide){
var tempPlaceholder = "";
$(obj).focus(function (){
tempPlaceholder = $(obj).attr("placeholder");
$(this).css("color","#000").attr("placeholder","");
}).blur(function (){
if ($(obj).val() == ""){
$(this).css("color",settings.placeholderColorToOther).attr("placeholder",tempPlaceholder);
}
});
}
}else { // 不可以 则用模拟span来实现
setSpan(obj);
}
});
// 模拟span标签
function setSpan(obj){
var placeholderStr = $(obj).attr("placeholder");
// span 标签的样式及参数
var textAlign = $(obj).css("text-align");
var display = "inline-block";
if ($(obj).val() != ""){
display = "none";
}
var width = $(obj).width();
if (obj.tagName == "TEXTAREA"){
width = $(obj).attr("maxwidth");
}
var height = $(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight();
var tempSpan = $(‘<span class="wrap-placeholder" style="position:absolute;text-align:‘+textAlign+‘;display:‘+display+‘; overflow:hidden;color:‘+settings.placeholderColorToIe+‘;width:‘+width+‘px; height:‘+height+‘px;">‘+placeholderStr+‘</span>‘);
tempSpan.css({
"margin-left":$(obj).css("margin-left"),
"margin-top":$(obj).css("margin-top"),
"font-size":$(obj).css("font-size"),
"font-family":$(obj).css("font-family"),
"font-weight":$(obj).css("font-weight"),
"padding-left":parseInt($(obj).css("padding-left")) + 2 + "px",
"line-height":$(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight() + "px",
"padding-top":$(obj)[0].tagName == "TEXTAREA" ? parseInt($(obj).css("padding-top")) + 2 : 0,
"min-width":$(obj).css("min-width")
});
$(obj).before(tempSpan.click(function (){
// 判断是否执行相应的操作，如果obj是不可用的，则不执行
if ($(obj).is(":enabled")){
$(obj).trigger("focus");
}
}));
if (settings.onInputHide){
$(obj).on("input",function (){
tempSpan.hide();
}).blur(function (){
if ($(obj).val() == ""){
tempSpan.show();
}
});
}else {
$(obj).focus(function (){
tempSpan.hide();
}).blur(function (){
if ($(obj).val() == ""){
tempSpan.show();
}
});
}
}
}
}(jQuery));
// 启用placeholder
$(function (){
$("[placeholder]").placeholder();
});
代码很简单，如何不会jQuery插件开发的，理解起来还是有点吃力的，当我第一次看到这种写法的时候，参数不是很理解
标签：style blog http color io os ar java for
原文地址：http://www.cnblogs.com/sslf/p/3998068.html
