0

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

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

当用户点击退出时，默认文本会淡入。

这工作正常，但唯一的问题是整个输入字段正在消失，包括 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 比较陌生，所以任何帮助都将不胜感激。

4

4 回答 4

0

在您的代码中：

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

将动画整个输入字段（连同它的边界）。

你想要有一些淡入/淡出的东西，还有一些其他的东西，它画出边界，永远不会移动。

在这样做的路上：

  • 把你的input里面span
  • 将边框放在 上span，从 中删除所有边框input
  • 保留您当前的focusin / focusout处理程序
于 2013-10-11T08:57:42.863 回答
0

您可以将您的文本字段包装在一个 div 中，并将其设置为看起来像输入的样式，同时无需背景和边框。

于 2013-10-10T09:43:14.683 回答
0

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

于 2013-10-10T09:47:56.180 回答
0

绕过您原来的问题：看起来您正在尝试重新实现现有功能：

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

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

请参阅：Html5请：输入[占位符]

Polyfill 插件：GitHub：jquery-placeolder

于 2013-10-10T09:48:12.110 回答