IE7输入：焦点答案

【问题标题】：IE7 input:focusIE7输入：焦点
【发布时间】：2010-11-01 08:22:34
【问题描述】：

我有以下在 IE7 中不起作用的 CSS。

input:focus{border-width: 2px;border-color: Blue; border-style: solid;}

基本上，我只想在输入焦点时设置边框属性。适用于 Firefox 等...如果有人能解释为什么它在 IE 7 中不起作用并提出可能的解决方法，将不胜感激。谢谢。

【问题讨论】：

我想我会添加：meyerweb.com/eric/css/tests/css2/sec05-11-03.htm
良好的链接。尝试在 IE 7 中选择链接，无边框，在 firefox 中尝试 - 边框。

标签： jquery css internet-explorer-7 css-selectors

【解决方案1】：

我理解不添加事件的愿望，但在这种情况下，MSIE7 在这一点上看起来很笨拙，需要被破解。在您对@Ape-inago 的评论中，您表示您正在使用 jQuery。这是jQuery中的解决方案。我在 MSIE 6 和 7 中对此进行了测试，它似乎可以满足您的需求。

<script type="text/javascript">
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('input')
            .bind('focus', function() {
                $(this).addClass('ieFocusHack');
            }).bind('blur', function() {
                $(this).removeClass('ieFocusHack');
            });
    }

});
</script>
<style>
input:focus, input.ieFocusHack
{
    border-width: 2px;
    border-color: Blue;
    border-style: solid;
}
</style>

【讨论】：

由于 SO 中的一些错误行为，我无法投票给您，但这确实有效，感谢您的回答。
这是一个非常古老的问题，但是如果你要走这条路，为什么要使用 CSS:focus 来处理一个问题而使用一个类来处理另一个问题？为什么不对两者使用相同的方法并摆脱输入：焦点？这样，当它崩溃时，您就会知道要修复所有浏览器并且没有一种以上的清理方法 - 支持 CSS 事件的浏览器会有一点性能损失，但 @987654322 也会有一点性能损失@ 堵塞。另外，为什么不直接做if (jQuery.browser.msie)？ jQuery 控件不需要额外的长度来验证数据类型和值。
@vol7tron 我不明白你的反对意见是什么。添加一个类是为了支持IE。在 jQuery 中测试 MSIE 似乎是合适的，虽然我不知道现在是否需要修复，一年半之后 IE6、IE7、IE8、IE9。如果您有更完整的解决方案，我建议您添加一个新答案。

【解决方案2】：

此问题的已知答案是使用以下代码：

    sfFocus = function() {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sffocus";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
        }
    }}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

这里是css样式

input:focus, input.sffocus{background-color:#DEEFFF;}

问题在于 IE 根本无法识别该样式。

编辑：您可以在这里找到使用原型的解决方案：http://codesnippets.joyent.com/posts/show/1837

【讨论】：

感谢您确认这是一个问题。我正在使用 jquery，因此如果需要，我可以使用 javascript 实现代码。我宁愿不这样做，因为我的页面已经充满了事件。我希望有一个可行的 CSS 解决方案或 hack。
@Rob Schieber，由于您使用的是 jQuery，您可以在页面加载时进行快速添加，检查您是否正在处理 MSIE，并使用相同类型添加焦点和模糊事件nandokakimoto 正在使用的想法。它也需要对你的 CSS 做一些小的改动。检查我的答案以了解另一种方法。
@nandokakimoto " sffocus=function(){} " 的语法究竟是什么意思？我想弄清楚这是在做什么。这也需要进入脚本标签正确吗？
这意味着：将具有以下 {definition}... 的 function() 分配为 sfFocus 的值，以便稍后由 sfFocus() 调用；是的，它需要在脚本标签中，因为它是 Javascript 代码。

【解决方案3】：

如果您使用的是 jQuery 1.7+，那么您会发现不再推荐使用“Live”，新的替代方法是“.on”，因此上面使用的 #DotNetWise 代码将显示为：

$.browser.msie && $.browser.version < 8 && $("input,select,textarea").on({
    focus: function(){
        $(this).removeClass("blur").addClass("focus");
    },
    blur: function(){
        $(this).removeClass("focus").addClass("blur");
    }
});

【讨论】：

使用 $.browser 也已从 jQuery 1.3+ 中弃用并在 1.9 中删除
这是一个浏览器检测比特征检测更有意义的问题，因为没有好的方法可以检测到这一点。

【解决方案4】：

一个更简单、更好的 jQuery 解决方案，适用于每个输入，甚至适用于以后动态附加的那些：

 $.browser.msie && $.browser.version < 8 && $("input,select,textarea").live("focus", function(){
   $(this).removeClass("blur").addClass("focus"); 
}).live("blur", function() { 
   $(this).removeClass("focus").addClass("blur"); 
});

CSS 示例：

input[type='text']:focus, input[type='text'].focus {
   border: 1px solid red;
}

【讨论】：

【解决方案5】：

在这种情况下最好获得javascript的帮助

【讨论】：

【解决方案6】：

它几乎可以工作

这样做的问题是，当相关元素具有焦点并且您打开另一个窗口然后返回带有相关元素的页面时，它的样式不正确:(

【讨论】：