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 likeを使用すると、問題が解決するはずです。

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

これにより、jQuery がインラインで上書きするのを防ぐことができます。これがそのフィドルです - http://jsfiddle.net/yasEB/

于 2013-02-03T21:01:52.217 に答える