inputにフォーカスすると消える文字をjQueryで実装する
- 2008/03/06 - 21:45
- JavaScript
- Ajax , form , jQuery
このブログの検索フォームでも使用している、フォーカスすると消える文字(何も入力が無ければ初期値に戻す)を、jQueryだけで実装する方法を紹介します。
実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。
// フォーカスで消える文字
$(function() {
$("input[@type='text']")
.focus(function() {
if ($(this).val()=="inputの文字列") { $(this).val("") }
})
.blur(function() {
if ($(this).val()=="") { $(this).val("inputの文字列") }
});
});
input[@type='text']の部分は、通常のjQuery同様CSSの記法で指定して下さい。
補足説明
inputの初期文字列にマルチバイト文字(日本語など)を使いたい場合は、設定ファイルをHTMLの文字コードと合わせて保存するか、エンコードマニアックス辺りでJavaScript文字列にエンコードしてあげて下さい。
尚、この実装の為だけにjQueryを使うのはあまりに不毛なので、あくまでも他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。
Trackback(0)
- Trackback URL
- Permanent link
Comment(0)
Post your commnet