1

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

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

JS

$("#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>
4

2 回答 2

1

当 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));
    }
);
于 2013-02-03T20:57:31.230 回答
1

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

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

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

于 2013-02-03T21:01:52.217 回答