2

入力テキストフィールドに、フォーカスが合っているときに太い青色の境界線を設定し、フォーカスがなくなったときにデフォルトで通常のデフォルトの境界線に戻そうとしています。私の入力フィールドの1つは、次のように定義されています。

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

これにより、フォーカスが合っているときに青い境界線が正しく配置されますが、フォーカスがなくなると、デフォルトのテキストフィールドが完全に失われます。入力テキストフィールドの境界線は定義されていません。それらのスタイルはそのようなフィールドのデフォルトのスタイルであり、フォーカスを失った後にこのスタイルに戻すようにしたいだけです。

4

4 に答える 4

5

css には、スタイルをアタッチできる :focus 疑似セレクターがあります。

input:focus { border:2px solid #036; }

また、正しい doctype を使用することを忘れないでください。<!DOCTYPE html>

于 2012-01-25T19:55:39.603 に答える
1

JavaScript で属性を直接変更する代わりにstyle、代わりにクラス名を追加および削除し、CSS を使用してクラスを定義します。

.newInputClass {
    border: 2px solid #003366;
}

そして、HTML では:

<input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
于 2012-01-25T19:56:25.517 に答える
0

これは、フォーカス アウトまたは「ぼかし」を行うと、実際にはスタイル全体をテキスト ボックスから削除することになり、デフォルトに戻すことにはならないためです。

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

次の値を持つように blur ステートメントを設定します。ボーダースタイルが必要です: inset;

border-style: inset; 
border-width: 2px;

お役に立てれば

于 2012-01-25T19:56:00.757 に答える
0

これを試して：

onblur="this.style.border='none';"

@Davidが提案するように、インラインスタイルを避けてクラスを交換することをお勧めします。

于 2012-01-25T19:56:37.390 に答える