TEXTAREA要素やINPUT要素の初期値を、クリックで自動に消すようにするプログラムを作ってみました。
TEXTAREA要素の初期値を指定しないと、HTMLの文法上にも問題があるので、使う意味はそこそこある気がします。
<textarea>初期値です。</textarea>
<input type="text" value="初期値です。" />
type属性をtextにするか、type属性を省略します。
<textarea class="nodes">初期値です。</textarea> <input type="text" class="nodes" value="初期値です。" />
class属性にnodesを付けると無効にできます。
<input type="text" class="right" value="初期値です。" /> <textarea class="bold nodes">初期値です。</textarea>
スペースで区切り、他のクラスなどとも併用もできます。
リロード時に、編集内容が初期値に置き換わるのを防止しました。
// TEXTAREA や INPUT の初期値をクリックで消す
// http://gmr.blog.shinobi.jp/Entry/527/
// 名称が思い浮かばない、ClearDefaultValue とか長すぎる。
// なぜか「説明」という意味の、Description を略して、Des になった。
function setupDes() {
// 種付け作業
var textarea = document.getElementsByTagName("textarea");
for (i = 0; i < textarea.length; i++) {
if (textarea[i].className.search("nodes") < 0) {
if (textarea[i].value == textarea[i].defaultValue) {textarea[i].className += " ondes"; }
textarea[i].onfocus = function() {offDes(this); }
textarea[i].onblur = function() {onDes(this); }
}
}
var input = document.getElementsByTagName("input");
for (i = 0; i < input.length; i++) {
if ((input[i].className.search("nodes") < 0) && ((input[i].getAttribute("type") == "text")||(input[i].getAttribute("type") == null))) {
if (input[i].value == input[i].defaultValue) {input[i].className += " ondes"; }
input[i].onfocus = function() {offDes(this); }
input[i].onblur = function() {onDes(this); }
}
}
return;
}
function offDes(from) {
if (from.className.search("ondes") < 0) {return 0;}
from.className = from.className.replace(/ondes/, "");
from.value = "";
return 1;
}
function onDes(from) {
if (from.value != "") {return 0;}
from.className += " ondes";
from.value = from.defaultValue;
return 1;
}
これがプログラム本体です。これと同じ、des.jsを保存してから、アップロードします。
<head>
<script src="http://なんとかブログ/des.js"></script>
</head>
1. のdes.jsをhead要素の中で読み込みます。
<body onload="setupDes();">
body要素の中に、これを書き加えます。
.ondes {color: #999;}
これをCSSの適当な位置に挿入します。
最初は、超シンプルプログラムでした。一応残しときます。
GAM-22(管理人)さん / 2008/11/20(Thu) / 編集日本代表サッカー ユニフォームさん / 2012/09/05(Wed) / 編集beats by dr dreさん / 2012/09/05(Wed) / 編集beats by dr dreさん / 2012/09/05(Wed) / 編集monster beatsさん / 2012/09/05(Wed) / 編集
