« JavaScript1000本ノックはじめました | Back To Blog Top | JS習作：タブでコンテンツを切り替える »
JS習作：フォームにフォーカスしたらデフォルトテキストを消す
概要
11月1週目のJavaScriptです。やりたかった事は以下。
- input要素にデフォルトテキストが表示されていて、文字色は薄い
- フォーカスすると、デフォルトテキストが消えて文字色を濃く変える
- 何も入力せずにフォーカスを外すとデフォルトテキストが再び現れる
- 何か入力してあれば、再びフォーカスしても何も起こらない
ソースコード
jQueryを使用しています。
$(function () {
var searchInpt = $("#searchText");
var defaultVal = searchInpt.attr("value");
searchInpt.css("color","#999");
searchInpt.focus(function() {
if (searchInpt.attr("value") == defaultVal) {
$(this).css("color","#ddd").attr("value","");
}
}).blur(function() {
var nowVal = searchInpt.attr("value");
if ($(searchInpt).attr("value") == "") {
$(this).css("color","#999").attr("value",defaultVal);
}
});
});学んだ事
変数に代入した結果は、その時点で保存されるという事。
例えば最初の方で var defaultVal = searchInpt.attr("value"); して、その変数に格納された値は、その後のブラウザ上の操作でvalueを変えても（その変数内では）替わらない。 処理を代入してるんじゃなくて処理の結果を代入していると言うか何と言うか。
なんかでも、条件によってはそうでもなかったような事があったような気がするのでその内また解るかも。
改良したい点
「スクリプトを適用する要素」を指定する方法（コード1行目）を、ある程度汎用的にしたい。
今はidを直接指定しているので、そこを「jsファイルを読み込ませたら全てよしなにやってくれる」的にしたい。
「inputのtypeがtextで、かつデフォルトでvalueの中身に何か入ってる場合」とかでif文かなー。 JS側でclassをキメて、それをHTMLに書くのはちょっともにょるしなあ。