使用 javascript 更改默认边框后焦点不起作用答案

【问题标题】：Focus doesn't work after I changed the default border with javascript使用 javascript 更改默认边框后焦点不起作用
【发布时间】：2013-02-03 20:53:49
【问题描述】：

基本上我有一个表格。在表单上方，我有一个链接到表单的链接。当有人单击锚点时，它会更改表单输入的 css 以使其具有红色边框。我还设置了一个计时器以在几秒钟后恢复原始边框颜色。问题是，在所有这些过程发生之后，当有人单击输入时， :focus 不再起作用。（ :focus 用于使边框颜色变深）。顺便说一句，我正在使用 jQuery。

如何避免这种情况发生？我希望 :focus 即使在应用锚后也能正常发生。这是小提琴链接http://jsfiddle.net/LSpm8/，这里是代码：

$("#anchor").click(
    function () {
        clearTimeout($.data(this, 'timer'));
        $("#form input").css({
            'border': '1px solid red'
        });
        $.data(this, 'timer', setTimeout($.proxy(function() {
            $("#form input").css({
                'border': '1px solid #CCC'
            });
        }, this), 1800));
    }
);

CSS

input { border: 1px solid #CCC; }
input:focus { border: 1px solid #000; }

HTML

<a href="#form" id="anchor">Link</a>
<form id="form">
    <input type="text" />
</form>

【问题讨论】：

标签： jquery css focus

【解决方案1】：

如果您像这样使用 !important 应该可以解决您的问题：

input:focus { border: 1px solid #000!important; }

这将防止 jQuery 内联重写它。这是它的一个小提琴 - http://jsfiddle.net/yasEB/

【讨论】：

【解决方案2】：

当 jquery 应用一个样式时，它被内联插入。从本质上防止任何样式表影响元素。尝试清除边界border: ''。

http://jsfiddle.net/LSpm8/1/

$("#anchor").click(
    function () {
        clearTimeout($.data(this, 'timer'));
        $("#form input").css({
            'border': '1px solid red'
        });
        $.data(this, 'timer', setTimeout($.proxy(function() {
            $("#form input").css({
                'border': ''
            });
        }, this), 1800));
    }
);

【讨论】：