突出显示 Web 表单上的“当前”文本框答案

【问题标题】：Highlighting the "current" textbox on a web form突出显示 Web 表单上的“当前”文本框
【发布时间】：2009-11-19 18:11:02
【问题描述】：

我有一个数据输入网络应用程序，其中具有焦点的控件具有黄色背景色（当用户导航离开时，它会变回白色）。执行此操作的脚本来自我不知道在哪里，它在 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
    }
)

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

【问题讨论】：

标签： asp.net javascript jquery jquery-ui

【解决方案1】：

使用 jQuery 的 blur() 和 focus() 方法。

另外，我认为您的意思是使用模糊功能删除突出显示（模糊意味着用户已单击相关元素）。使用 focus() 开启高亮。

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

【讨论】：

你说得对，我的意思是 blur() 而不是 onblur()。就此而言，focus() 用于加法，而 blur() 用于减法。
我刚刚注意到，我从您的代码中复制的 ':text' 选择器没有意义，因此您需要根据需要对其进行调整。（除非那是我不熟悉的选择器。）
是的，应该是“输入：文本”。我今天很牛逼。

【解决方案2】：

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

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

对于 600 多个元素，无脚本的解决方法可能更可取，尤其是在涉及老客户的情况下。

【讨论】：

【解决方案3】：

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

.hilite {
  border: 2px solid gray;
}

【讨论】：

【解决方案4】：

模糊/聚焦对你有用。如果您能够在某个时候将所有用户一直迁移到 IE8，您也可以使用 CSS 实现所需的效果：

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

【讨论】：

【解决方案5】：

这不能回答您的问题，但可以替代...jQuery Tools Expose 将对输入框外的所有元素应用叠加层，从而迫使用户专注于输入。这是一个不错的功能，插件非常轻量级。我还在this answer 中发布了一些执行相同操作的代码，以防您不想使用插件。

【讨论】：

【解决方案6】：

此任务有一个免费的小部件库：Focus highlight widget。

【讨论】：