Question

我在<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:text和textarea创建一个占位符，这样当我使用像$("#lgip").makePlacer("Enter Username Or Email");这样的东西时，它会像我创建的那样创建一个占位符

Answer 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/

扩展jQuery以制作像我创建的占位符

1 个答案: