是否有用于淡化文本框提示的 jQuery 插件？答案

【问题标题】：Is there a jQuery plugin for fading textbox hints?是否有用于淡化文本框提示的 jQuery 插件？
【发布时间】：2011-07-23 01:18:22
【问题描述】：

我想知道是否有可用的 jQuery 插件可以在文本框为空时显示提示。

我发现的是：http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/。但是，这只是作为placeholder HTML5 属性。我正在寻找的是一个插件，它显示多个淡化提示，如http://www.wolframalpha.com/。（编辑：我指的是文本框中的灰色文本，而不是工具提示。）

虽然自己创建可能不会太麻烦，但我不赞成重新发明轮子的理论 - 所以有人知道这样的插件是否已经可用？

谢谢。

【问题讨论】：

标签： javascript jquery textbox fade hint

【解决方案1】：

我自己做了一个，所以它完全符合我的需要：http://jsfiddle.net/42t6R/2/。

这很简单，但效果很好。

编辑：新版本bug少了，为什么不把它作为插件提交:)

http://plugins.jquery.com/project/fadehints

http://jsfiddle.net/9rgHg/2/

(function( $, undefined ) {

    $.fn.fadehints = function( data, speed ) {
        var i = 0;
        var $this = $( this );
        var offset = $this.offset();
        var $input = $("<input>").css( "position",          "absolute"                 )
                                 .css( "left",              offset.left                )
                                 .css( "top",               offset.top                 )
                                 .css( "background-color",  "transparent"              )
                                 .css( "color",             "gray"                     )
                                 .css( "border",            0                          )
                                 .css( "padding",           2                          )
                                 .css( "font-size",         $this.css( "font-size"   ) )
                                 .css( "font-family",       $this.css( "font-family" ) );

        var $parent = $this.parent();
        var $div = $( "<div>" ).append( $this.detach(), $input );

        var change = function() {
            if( i >= data.length ) {
                i = 0;
            }
            $input.hide().val( data[i] ).fadeIn( 1000 );
            i++;
        };

        $this.bind( "focus keydown", function(e) {
            if( !( e.bubbles == null ) ) { // Only clear if event was triggered by user
                window.clearInterval( interval );
                $input.hide();
            }
        } );

        $input.bind( "click focus", function() {
            window.clearInterval( interval );
            $this.focus(); // $this === the real textbox
            $( this ).hide(); // $(this) === the overlap textbox
        } );

        $this.click( function() {
            $input.hide();
            window.clearInterval( interval );
        } );

        $this.blur( function() {
            window.clearInterval( interval );
            if( $this.val() === "" && $this[0] !== document.activeElement ) {
                if( !$input.is(":visible")) {
                change();
                }
                interval = window.setInterval( change, speed );
            }
        } );
        $parent.append( $div );

        change(true);
        var interval = window.setInterval( change, speed );


        return $this;
    };

})(jQuery);

$(function() {
    $('#tb').fadehints([
        "test1", "test2"
    ]);
});

【讨论】：

【解决方案2】：

这可能会有所帮助：http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

【讨论】：

非常感谢。但是，我实际上不是在寻找工具提示，而是在文本框中放置示例文本（例如灰色）以显示可以放入其中的内容。

【解决方案3】：

嘿，primvdb，this 呢？

【讨论】：

我可能错了，但它是否也支持淡入淡出和多个值？

【解决方案4】：

试试这个：http://jqueryfordesigners.com/coda-popup-bubbles/ 它应该是您正在寻找的。p>

【讨论】：

嗯，这与文本框和示例值没有太大关系。我实际上是指wolframalpha.com 上的文本框，而不是那个工具提示。