突出显示网络表单上的“当前”文本框

Question

我有一个数据输入Web应用程序，其中具有焦点的控件具有黄色背景色（当用户导航离开时，它变回白色）。 执行此操作的脚本来自I-not-know-where，它在IE7中中断，导致各种问题，例如下拉菜单无法正常工作（该脚本旨在在文本框和下拉菜单上运行，或者至少可以在下拉菜单中使用）的实现考虑到了这一点），并且可以在ie6中使用。

我的一些用户已在不通知我的情况下切换到IE7，其余用户将在将来的某个时间转到IE7。 因此，我想实施一个更友好的解决方案。 我真的很喜欢jquery，并且已经在应用程序中使用它进行各种操作。 另外，已经建议跨浏览器支持在Intranet上可能/最终将很重要。

我更希望避免的是向控件中手动添加一堆onblur =“ SomeMethod（）”（或类似的东西）（应用程序中必须有600+）。 实际上，如果我告诉老板，他可能会向我扔东西。

我已经在应用程序中使用了JQuery。 使用函数的地方是显式的，并且全部在onblur中调用。

目前，我很想做这样的事情：

$(document).ready (function( 
    $(':text').focus(function() 
    { 
        //Do Highlighting
    }

    $(':text').blur(function()
    {
        //Good bye highlighting
    }
)

1. 我在他的正确轨道上吗？ onblur是我最好的选择吗？ 有没有更好的办法？
2. 其他onblur函数根据父级的值显示/隐藏子级字段。 我意识到我没有提供代码，但是我是否准备好应对任何冲突？

Answer 1

使用jQuery的blur（）和focus（）方法。

另外，我认为您的意思是使用模糊功能删除突出显示（模糊表示用户已单击有问题的元素）。 使用focus（）打开突出显示。

$(document).ready (function() {
    $(':text').focus(function() { 
        $(this).addClass('highlight');
    });
    $(':text').blur(function() { 
        $(this).removeClass('highlight');
    });
});

Answer 2

似乎有一种解决方法可以使：focus伪类在IE6 / 7中工作。 我自己没有使用过，但我认为这是一个既定的解决方案：

http://www.xs4all.nl/~peterned/csshover.html

使用600多个元素时，最好采用无脚本的解决方法，尤其是在涉及较旧的客户端的情况下。

Answer 3

$('textarea, input:text').focus(function() {
     $(this).addClass('hilite');
}).blur(function() {
     $(this).removeClass('hilite')
});

.hilite {
  border: 2px solid gray;
}

Answer 4

模糊/对焦将为您工作。 如果您能够在某个时候将所有用户一直迁移到IE8，则还可以使用CSS达到预期的效果：

input[type=text]:focus { 
    background-color: lightyellow; 
}

Answer 5

有一个免费的小部件库可用于此任务： 焦点突出小部件 。

Answer 6

这不会回答您的问题，但是是替代方法。jQuery Tools Expose将对输入框外的所有元素应用覆盖，从而迫使用户将注意力集中在输入上。 这是一个很好的功能，该插件非常轻巧。 如果您不想使用插件，我还会在此答案中发布一些功能相同的代码。