Question

我有一个输入文本字段，其中包含“搜索网站...”文本作为其默认值。

当用户点击它时，文本将淡入一个空白框，为搜索查询做好准备。

当用户点击时，默认文字会重新淡入。

这很好但唯一的问题是整个输入字段随着包含BORDER和BACKGROUND而消失。所以我的问题是：

是否可以仅为文本制作动画？

以下是实现这一目标的代码：

        <fieldset id="siteSearch">
            <input type="text" class="siteSearchField" value="Search the website..." maxlength="50"><input type="image" class="siteSearchBtn" src="header_search_btn.gif" alt="search">
            <script>
                var defaultText = $('.siteSearchField').val();
                $('.siteSearchField')
                .focus
                (
                    function()
                    {
                        $(this)
                        .animate
                        (
                            {'opacity': 0}, 287,
                                function()
                                {
                                    $(this).val('');
                                }
                        )
                        .animate
                        (
                            {'opacity': 1}, 287
                        );
                    }
                )
                .focusout
                (
                    function()
                    {
                        $(this)
                        .animate
                        (
                            {'opacity': 0}, 287,
                                function()
                                {
                                    $(this).val(defaultText);
                                }
                        )
                        .animate
                        (
                            {'opacity': 1}, 287
                        );
                    }
                );
            </script>
        </fieldset>

我对jQuery相对较新，所以任何帮助都会非常感激。

Answer 1

您可以将文本字段包装在div中，并将其设置为输入样式，而不带背景且没有边框。

Answer 2

您可以使用jQuery Color plugin为文本颜色设置动画，使其与背景颜色相同，而不是为不透明度设置动画。请参阅插件DEMO

Answer 3

支持原始问题：看起来您正在尝试重新实现现有功能：

<input type="search" placeholder="Search the website ..." />

最近的浏览器（IE 9及更少版本不支持IE 10和其他浏览器）支持placeholder属性，您可以使用现有的javascript插件将功能添加到旧版浏览器中

请参阅：Html5Please : input[placeholder]

Polyfill插件：GitHub : jquery-placeolder

Answer 4

在您的代码中：

$(this).animate( {'opacity': 0}, 287, /*callback*/ );

将为整个输入字段（及其边框）设置动画。

你希望某些东西淡入/淡出，别的东西，它会画出永不移动的边框。

在此过程中：

将input放入span
将边框放在span上，从input
保留您当前的focusin / focusout处理程序

使用jQuery为输入字段中的文本设置动画

4 个答案: