このページの目次

入力エリアの初期値を自動でクリア

概要

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

この記事へのコメントはまだありません

コメントフォーム

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

実験室に戻る

著作権情報等

Copyright © 2004-2008 yomotsu-net. Some Rights Reserved.