0

我在一个<input>字段周围创建了一个占位符：

HTML： 

 <div style="position: relative;font-size: 20px;">
     <input type="text" name="username" id="lgip" style="width: 100%"  class="lgip"    value="<?php echo $username ?>" onkeyup="perform(this.value,'plcun')"/>
     <div class="placer" style="padding: 5px" onclick="$('#lgip').focus()" id="plcun">Enter UserName or Email Address</div>
 </div>

JavaScript： 

function perform(val,hid){
    if(val=="") {
        $("#"+hid).show();
    } else{
        $("#"+hid).hide();
    }
}

CSS： 

input.lgip{ padding: 5px;font-size: 20px;border: 1px solid #2B4EA2 }
div.placer{ position: absolute;z-index: 5;top: 0px;left: 0px;background: transparent;width: 100%;color: #cccccc;white-space: nowrap;padding: 2px;padding-left: 4px }

目前，这需要我在其<div>周围添加一个外层，在其下方添加<input>另一个<div>。

我想扩展 jQuery，以便它可以为任何input:textand制作一个占位符textarea，这样当我使用类似的东西时，$("#lgip").makePlacer("Enter Username Or Email");它就会像我创建的那样制作一个占位符。

4

1 回答 1

1

编写 jQuery 插件其实很简单。基本上，您只需将插件功能添加到jQuery.fn对象。在插件中，您可以创建所需的 HTML 元素并将它们添加到 DOM。

(function($){
    $.fn.makePlacer = function(text){
        this.each(function(){
            var e = $(this);
            if (e.is("input[type='text'], textarea")) {
                var wrapper = $("<div/>").css({position: "relative", fontSize: 20});
                var placer = $("<div/>").html(text != undefined ? text : "").css({padding: 5}).addClass("placer").click(function(){
                    e.focus();
                });
                e.wrap(wrapper);
                e.after(placer);
                e.keyup(function(){
                    e.val().length ? e.next().hide() : e.next().show();
                });
            }
        });
    };
})(jQuery);

$("#lgip").makePlacer("Enter Username Or Email");

JSFiddle：http: //jsfiddle.net/QQdfQ/1/

于 2012-08-05T15:39:24.130 回答