ページが読み込まれたときに、入力コントロールに焦点を合わせて強調表示(境界線の色または背景色の変更)したいと思います。どうすればいいですか?これは私がこれまでに得たものです。
<script type="text/javascript">
$(function () {
$("#txt1").focus();
});
</script>
ページが読み込まれたときに、入力コントロールに焦点を合わせて強調表示(境界線の色または背景色の変更)したいと思います。どうすればいいですか?これは私がこれまでに得たものです。
<script type="text/javascript">
$(function () {
$("#txt1").focus();
});
</script>
CSS:focus
セレクターを見てください。そして、次のようなCSSクラスを指定するだけです。
#txt1:focus {
border-color:red;
}
古いブラウザ(IE7とその他)ではサポートされていないため。あなたはJSでそれをしたいかもしれません。
$("#txt1").focus(function(){ $(this).addClass("focused")});
$("#txt1").blur(function(){ $(this).removeClass("focused")});
focused
このように定義されている場所:
#txt1.focused {
border-color:red;
}
編集:
Jquery.focusドキュメント。
$("#txt1").focus(function(){ $(this).addClass("focused")});
上記の行は、ハンドラーをフォーカスイベントにバインドするだけで、フォーカスを変更したり、すぐに実行したりすることはありません。ページの読み込みに焦点を当てたフィールドを取得するには、その後に別の行を追加する必要があります。
$("#txt1").focus();
これは、選択した要素にフォーカスを設定し、以前にアタッチされたハンドラーを実行します。短い表記:
$("#txt1").focus(function(){ $(this).addClass("focused")}).focus();
ページの読み込み時に要素が自動化されたデモ
あなたが持っているものは要素に焦点を合わせます。:focus
CSSの疑似セレクターを使用して、必要に応じて入力のスタイルを設定できます。
#txt1:focus {
border: 1px solid #C00;
background: #CCC;
}
ここでは、いくつかのcssを使用して、境界線の色、背景色を適用できます。入力に焦点を合わせると色が変わる以下のcssを参照してください
input:focus {
font-family:Verdana, Geneva, sans-serif;
border-color:#9ecaed;
box-shadow:0 0 5px #9ecaed;
}
フォーカスした後、強調したいcss属性を配置します。