使用基于 jQuery 的 EZPZ 提示更改输入字段颜色

Question

我正在使用下面的 js 脚本（来自 http://blog.enriquez.me/2009/3/28/jquery-plugin-ezpz-hint/ ）并添加了 hint.css('color','#999999'); 部分以在未聚焦时使输入字段内的标签文本变灰。但是，我无法弄清楚如何在输入字段中使文本变为黑色（#000）。谁能在下面的代码中解释一下应该放在哪里？ （或者，如果它应该以某种方式添加到 CSS 中？）

(function($){
$.fn.ezpz_hint = function(options){
    var defaults = {
        hintClass: 'ezpz-hint',
        hintName: 'ezpz_hint_dummy_input'
    };
    var settings = $.extend(defaults, options);

    return this.each(function(i){
        var id = settings.hintName + '_' + i;
        var hint;
        var dummy_input;
        if ($(this).hasClass('select2-focusser') || $(this).hasClass('select2-input'))
            {
                    return true; //skips to the next iteration for select2 inputs
                }

        // grab the input's placeholder attribute
        text = $(this).attr('placeholder');

        // create a dummy input and place it before the input
        $('<input type="text" id="' + id + '" value="" />')
            .insertBefore($(this));

        // set the dummy input's attributes
        hint = $(this).prev('input:first');
        hint.attr('class', $(this).attr('class'));
        hint.attr('size', $(this).attr('size'));
        hint.attr('autocomplete', 'off');
        hint.attr('tabIndex', $(this).attr('tabIndex'));
        hint.addClass(settings.hintClass);
        hint.val(text);
        hint.css('color','#999999');

        // hide the input
        $(this).hide();

        // don't allow autocomplete (sorry, no remember password)
        $(this).attr('autocomplete', 'off');

        // bind focus event on the dummy input to swap with the real input
        hint.focus(function(){
            dummy_input = $(this);
            $(this).next('input:first').show();
            $(this).next('input:first').focus();
            $(this).next('input:first').unbind('blur').blur(function(){
                if ($(this).val() == '') {
                    $(this).hide();
                    dummy_input.show();
                }
            });
            $(this).hide();
        });
        // swap if there is a default value
        if ($(this).val() != ''){
            hint.focus();
            hint.css('color','#000000');
        };
    });
};
})(jQuery);

谢谢！

Answer 1

尝试将您的提示功能更改为此

    hint.focus(function(){
        dummy_input = $(this);
        $(this).next('input:first').show();
        $(this).next('input:first').focus();
        $(this).next('input:first').unbind('blur').blur(function(){
            if ($(this).val() == '') {
                $(this).hide();
                dummy_input.show();
            }else{
                dummy_input.css('color','#000000');
            }
        });
        $(this).hide();
    });

为什么不使用这个插件https://github.com/mathiasbynens/jquery-placeholder ？这在过去对我来说非常有效。