1. 概要
    1. 機能
  2. 使い方
    1. 呼び出し方
    2. ダウンロード
    3. バージョン
  3. コメント (4)
  4. トラックバック (2)
更新日時
2009-02-12 18:58
永続的 URI
http://www.code-404.net/articles/javascript/focus-clear-value-js
タグ

概要

フォームの入力項目にフォーカスした際に、その項目がデフォルトのままなら消去し、フォーカスが外れた際に、その項目が空欄ならデフォルト値に戻す働きをする JavaScript です。多少のユーザビリティの向上を目的としています。

機能

使い方

ダウンロードしたアーカイブを解凍し、 任意の場所に設置します。その後、 HTML の script 要素で指定します。 prototype.js 1.4.0 以上のバージョンを使用したバージョンも含まれています。

呼び出し方

focus-clear-value.js を呼び出した後に外部ファイルから呼び出します。以下のようにして、その HTML ファイルを読み終えた後に実行するようにします。

var targetIds = [
    'hoge',
    'foo',
    'bar'
];

window.onload = function () {
    focusClearValue(targetIds);
}

最初に適用させるフォームの入力項目の id 属性の値を配列として作成し、それを引数にして呼び出します。

prototype.js 使用バージョンは prototype.js を呼び出した後に focus-clear-value.js を呼び出してください。そして、外部ファイルから以下のように呼び出します。

var targetIds = [
    'hoge',
    'foo',
    'bar'
];

Event.observe(window, 'load', function() {
    new focusClearValue(targetIds);
},false);

HTML ソースは以下のように JavaScript の指定だけで済み、すっきりします。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="focus-clear-value.js"></script>
<script type="text/javascript" src="your-script.js"></script>

ダウンロード

バージョン

1.0 - 2006-04-11
公開

コメント

dog - 2007-08-23 15:10

使い方を見たのですが分かりません。

具体的な例などがあれば教えてください。

シンヤ - 2007-08-23 23:21

まず、適用させたい HTML の input 要素、または textarea 要素に id 属性を指定します。

次に、 HTML の head 要素内で focus-clear-value.js を呼び出し、その後に同様に自身が作成した外部 JavaScript ファイルから、呼び出し方に書かれた方法を記述します。 target_ids で作成された文字列の配列が、適用させたい HTML の input 要素、または textarea 要素に id 属性値です。

dog - 2007-08-24 10:03

説明を参考にしてファイルを作成後、実行してみるときちんとできました。

丁寧に説明して頂き、ありがとうございました。

つよし - 2007-10-31 16:16

id指定ではなくてclassで指定することは出来ないのでしょうか。

利便性がかなり上がるのではないかと思い、コメントさせていただきました。

よろしくお願いします!

トラックバック

acai berry diet - 2009-03-17 23:24

access nod teaching be carry flat flat realise language. krigopizp more one h...

Viagra for women. - 2009-04-27 06:07

Viagra. Cheap viagra. Generic viagra. Purchase viagra. Best price for generic...

トラックバック URI
http://www.code-404.net/cms/trackback/4
関連記事
検索

情報