onBlur 和 onFocus 位于单独的 jQuery 中

Question

这个 jQuery 不起作用。我知道这看起来有点奇怪。但我怎样才能让它发挥作用呢？

JavaScript 部分中的 CSS 修改不起作用。在 .blur 上，如果字段中没有任何内容，则 jQuery 应更改文本框的颜色。

在模糊上，如果字段中没有任何内容，则文本应该更改并且文本颜色应该更改。在焦点上，如果字段中存在“搜索范围”，则文本应更改且文本颜色应更改。

http://jsfiddle.net/7P5J8/

我必须删除内联 JavaScript 吗？

Answer 1

尝试一下，看看是否可以解决问题：

$("#additionalsearch").focus(function(){
if (this.value == "Search Within")
{
    this.value = "";
    $(this).css('color','#000000');
 }
});

$("#additionalsearch").blur(function(){

        if (this.value == "")
        {
            this.value = "Search Within";
            $(this).css('color','#a9a9a9');
        }
    });

http://jsfiddle.net/GhA2u/

Answer 2

您必须删除内联代码，因为它在事件处理程序之前运行。
您应该保留 HTML 仅用于表示，所有逻辑和 JavaScript 都放在

修复了 JSFiddle

JQuery

$(document).ready(function() {
    $('input#additionalsearch').focus(function() {
        if (this.value === 'Search Within') {
            $(this).css('color', '#000000').val('');
        }
    });
    $('input#additionalsearch').blur(function() {
        if (this.value === '') {
            $(this).css('color', 'red').val('Search Within');
        }
    });
});

HTML

<input id="additionalsearch" type="text" value="Search Within" />

Answer 3

通过 Firebug 运行代码并查看 css 属性/属性是什么。内联应该覆盖 javascript 属性设置/css 样式属性，除非您使用重要！属性。

Answer 4

我最好的猜测是内联函数首先运行，因此当该字段为空并且您单击时，它会被设置为具有内联函数的内容。因此，无论如何，当调用 jquery onblur 时，该字段中始终包含文本（因为即使没有文本，并且调用 onblur 时，内联函数也会在 jquery 运行之前添加文本）。

您能详细说明一下您希望发生什么吗？也许我可以帮忙。