選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」
2006年11月09日-
スポンサード リンク
Highlight active input
This script is easy to configure. All you have to do is to define how the active input should be highlighted. This is done by CSS. Then you have to call a function at the bottom of your page to initialize the script.
選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」。
実装方法は簡単で、次の通り。
1. CSSの定義(選択状態/未選択状態のテキストエリアのスタイル定義)
<style type="text/css">
/* 未選択状態のテキストエリアのスタイル */
.textInput,textarea{
width:300px;
background-color:#FFFFFF;
border:1px solid #000;
}
/* 選択状態のテキストエリアのスタイル */
.inputHighlighted{
background-color:#000000;
color:#FFF;
width:300px;
border:1px solid #000;
}
</style>
2. JavaScript読み込み
<script type="text/javascript" src="js/highlight-active-input.js"></script>
3. ページの最後、あるいはbodyのonloadイベントなんかで次の関数を呼び出し
initInputHighlightScript();
たったこれだけで、使いやすいフォームが出来上がります。
デフォルトのフォームは、今どこにフォーカスがあっているのか分からなかったりしますが、このフォームであれば、一切迷いませんね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ