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 に答える