javascript - 境界線/色を変更 onFocus

Question

フォーカスした後、divのborder-bottomの色を変えるスクリプトを作ってみました

<input type="text">

他の場所をクリックした後、デフォルトの色に戻ります。

これは私が試したものです：

CSS:

.div1 {border-bottom:1px solid #ccc;}

Javascript:

function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); };

HTML:

<input type="text" onFocus="inputFocus();">

最初の部分 (フォーカス時に色を変更する) は正常に動作しますが、他の場所をクリックした後 (入力にフォーカスしていない)、css ファイルで設定されている通常のスタイルに戻りません。

何が間違っているのですか？

score 2 · Accepted Answer

私はお勧めします：

$('input').focus(
    function(){
        $(this).css('border-bottom','1px solid #000');
    }).blur(
        function(){
            $(this).css('border-bottom','1px solid #ccc');
        });

JS フィドルのデモ。

ただし、CSS に慣れている場合:

input:focus,
input:active {
    border-bottom: 1px solid #000;
}

JS フィドルのデモ。

score 1 · Accepted Answer

$('input').focus(function(){
    $(this).css('border-bottom-color','#ffba00');
});
$('input').blur(function(){
    $(this).css('border-bottom-color','#ccc');
});

score 0 · Accepted Answer

変更をロールバックするには、関数を onBlur イベントに追加する必要があります

score 0 · Accepted Answer

onBlurイベントを使用する必要があります。

JavaScript:

function inputBlur() {
    $(".div1").css("border-bottom","1px solid #ccc");
}

HTML:

<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();">

ただし、より良いオプションは、クラスの切り替えを使用することです。

HTML:

<input type="text" class="myinput">

CSS:

.myinput {
    border-bottom:1px solid #ccc;
}

.myinput.active {
    border-bottom:1px solid #ffba00;
}

JavaScript:

$(function() {
    $(".myinput").on("focus", function() {
        $(this).addClass("active");
    }).on("blur", function() {
        $(this).removeClass("active");
    });
});

score 0 · Accepted Answer

これを行うために JavaScript を使用しないでください。CSS には、:focusこれにより適したセレクターがあります。

.div1 {border-bottom:1px solid #ccc;}
.div1:focus {border-bottom:1px solid #ffba00;}

score 0 · Accepted Answer

HTMLで関数を呼び出す代わりに、これを試すことができます：

.border {border-bottom:1px solid #ccc;}

$("input[type='text']").focus(function(){
    $(this).addClass("border")
})

$("input[type='text']").blur(function(){
   $(this).removeClass("border");
})

score 0 · Accepted Answer

これは、制御からフォーカスを失った後、変更された css が元に戻されないために発生します。

これは役立ちます：

<input type="text" onFocus="inputFocus();" onblur="inputBlur();">

function inputFocus(){ $(".div1").removeAttr('style'); };

javascript - 境界線/色を変更 onFocus

7 に答える 7

Related

Reference