jquery ghost文本实现

Question

我在http://www.dinnermint.org/blog/share/jquery-ghost-text-plugin/上对重影文本使用了这种方法。

我已经将输入字段font-size和color (在CSS中)设置为12px和#666。

当我开始打字时，我希望字体颜色为#000，字体大小为13px；，也就是说，幻影文本应该是褪色的，字体应该更小。(就像我上面提供的链接中的示例)。

请帮帮忙。

Answer 1

插件在它里面做这件事：

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

当它使用占位符文本时。所以，你应该能够在你的CSS中放一些类似这样的东西：

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

像这样更改字体大小可能会产生奇怪的视觉效果，但您可以通过使用显式高度来避免这种情况。你最好改变颜色，保持字体大小不变。

您也可以尝试我的take，它使用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”类的内容，并假定页面加载时的值是ghost文本。

$(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{
    font-size:.9em;
    color:#ccc;
}

这将比您的默认大小和灰色的小一点，我也喜欢使我的幽灵文字个人斜体。

这是我对上述代码的working ghost text example，也是我写的一篇关于我的代码的更多信息的文章：jQuery Ghost Text on programming.linnnk