Question

我在http://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/使用此方法获取重影文字。

我将输入字段的字体大小和颜色（在CSS中）设置为12px和＃666。

当我开始输入时，我希望字体颜色为＃000＆amp; font-size为13px;意思是，鬼文本应该有一个褪色的颜色和较小的字体。（就像我上面提供的链接中的例子一样）。

请帮助。

Answer 1

插件在其中执行此操作：

$(this).addClass("disabled");

使用占位符文本时。所以，你应该能够在你的CSS中添加这样的东西：

input {
    font-size: 13px;
    color: #000;
}
input.disabled {
    font-size: 12px;
    color: #666;
}

更改字体大小可能会导致奇怪的视觉效果，但您可以通过使用显式高度来避免这些。你可能最好只更改颜色并保持字体大小不变恕我直言。

您也可以尝试同样的事情，它使用title属性而不是placeholder，并在提交包含表单时清除占位符文本。

(function($) {

    $.fn.egText = function(options) {
        options  = $.extend({ }, $.fn.egText.defaults, options || { });
        var $all = this; 
        $all.focus(function() {
                var $this = $(this);
                if(!$this.data(options.dataKey))
                    $this.data(options.dataKey, 'yes').removeClass(options.egClass).val('');
            })          
            .blur(function() {
                var $this = $(this);
                if($this.val() == '')
                    $this.addClass(options.egClass).removeData(options.dataKey).val($this.attr('title'));
                else            
                    $this.data(options.dataKey, 'yes');
            })          
            .blur();    
        $.unique($all.closest('form')).submit(function() {
            $all.each(function() {
                var $this = $(this);
                if(!$this.data(options.dataKey))
                    $this.val('');      
            });         
            return true;
        });     
    };  

    $.fn.egText.defaults = { 
        dataKey: 'egText',  // The key we use for storing our state with .data(), just in case there are conflicts...
        egClass: 'lolite'   // The CSS class to add to the <input> when we're displaying the example text.
    };  

})(jQuery);

Answer 2

这是一个替代/更简单（虽然同时不太健壮）的例子，可以完成同样的目标。

这是jQuery，它会自动将其自身应用于应用了“ghost-text”类的任何内容，并假定页面加载时的值为重影文本。

$(document).ready(function(){   
    $('.ghost-text').each(function(){
        var d = $(this).val();
        $(this).focus(function(){
            if ($(this).val() == d){
                $(this).val('').removeClass('ghost-text');
            }
        });
        $(this).blur(function(){
            if ($(this).val() == ''){
                $(this).val(d).addClass('ghost-text');
            }
        });
    });
});

因此，要更改输入的显示方式，您可以像这样设置ghost-text类的样式：

.ghost-text{
    font-size:.9em;
    color:#ccc;
}

这比你的默认尺寸和灰色要小一些，我也喜欢让我的鬼文字斜体。

以上代码中的working ghost text example以及我撰写的文章中提供了有关我的代码的更多信息：jQuery Ghost Text on programming.linnnk

jquery ghost文本实现

2 个答案: