概要
type 属性の値が text の input や textarea 要素がフォーカスされるとあらかじめ入力された初期値が自動で削除されるスクリプトです。また、初期値の状態のときのみ、input 要素と textarea 要素に class 属性値に default-value が自動で付与されます。
WCAG1.0には
- 10.4 ユーザーエージェントが、空のテキストフィールドを正しく扱えるようになるまでは、デフォルトの文字を入れておくようにする。[優先度3]
- たとえばHTMLの場合は、TEXTAREA要素とINPUT要素にデフォルトの文字を入れるようにしてください。
説明
HTMLの head 要素内などでこの JavaScript を読み込んでください。この JavaScript 内を変更する必要はありません。自動で全ての type 属性値が text の input 要素と textarea 要素に適用されます。
ソースコード
/* Author : http://www.yomotsu.net created: 2007/04/05 Licensed under the GNU Lesser General Public License version 2.1 input、textareaの初期値を自動でクリアする */ /* clearDefaultValue ----------------------------------------*/ function yomotsuClearDefaultValue(){ var input = document.getElementsByTagName("input"); var textarea = document.getElementsByTagName("textarea"); /* input */ for (i=0;i<input.length;i++){ if((input[i].getAttribute("type") == "text")||(input[i].getAttribute("type") == null)){ if (input[i].value == input[i].defaultValue){ input[i].className += " default-value" } input[i].onfocus = function(){ if (this.value == this.defaultValue){ this.value = ""; this.className = this.className.replace(/ default-value/, ""); } } input[i].onblur = function(){ if (this.value == ""){ this.value = this.defaultValue; this.className += " default-value" } } } } /* textarea */ for (i=0;i<textarea.length;i++){ if (textarea[i].value == textarea[i].defaultValue){ textarea[i].className += " default-value" } textarea[i].onfocus = function(){ if (this.value == this.defaultValue){ this.value = ""; this.className = this.className.replace(/ default-value/, ""); } } textarea[i].onblur = function(){ if (this.value == ""){ this.value = this.defaultValue; this.className += " default-value" } } } } addEvent(window, 'load', yomotsuClearDefaultValue); /* add event ----------------------------------------*/ function addEvent(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } }

トラックバックURI
http://www.yomotsu.net/lab/javascripts/creardefaultvalue/trackback
この記事へのコメントはまだありません
コメントフォーム
実験室に戻る