Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

Form field hints with CSS and JavaScript

Mar272007
Vote:
http://bizcaz.com/archives/2007/03/27-012032.php
Categories: JavaScript
Tags: JavaScript
Social Bookmark

Prev Page: IE6でαチャンネルPNG画像を表示する３
Next Page: dp.SyntaxHighlighter

こんにちわ^^

学生はいいですね。春休みですもんね。
山手線の中でTDL帰りの小学生や中学生らしき女の子をたくさんみかけました。

羨ましい限りです (;￣∇￣A

さて、今回はフォームにフォーカスが入ると吹き出しを表示するものを見つけたのでTRYしてみました。
以前にも、こちらのコメントフォームに吹き出しメッセージを表示するで似たようなのを紹介してますが、今度のはもっとカンタンに設置できました。

サンプル：メールフォーム

設置方法

まず、こちらのorm field hints with CSS and JavaScriptから圧縮ファイルをダウンロードします。
'final example'というリンクがありますので、そちらをクリックするとダウンロードできます。

圧縮ファイルを適当なフォルダに展開すると、イメージファイルとサンプルページがあります。
サンプルページ中にJavaScriptが記述されています。そのJavaScriptを抜き出したものが以下になります。
デフォルトでは、<input>タグと<select>タグしか吹き出しされないようなので、<textarea>タグでも吹き出しするようカスタマイズしてみました。

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareInputsForHints() {
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++){
// test to see if the hint span exists first
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
// repeat the same tests as above for selects
var selects = document.getElementsByTagName("select");
for (var k=0; k<selects.length; k++){
if (selects[k].parentNode.getElementsByTagName("span")[0]) {
selects[k].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
selects[k].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
var textareas = document.getElementsByTagName("textarea");
for (var i=0; i<textareas.length; i++){
// test to see if the hint span exists first
if (textareas[i].parentNode.getElementsByTagName("span")[0]) {
// the span exists! on focus, show the hint
textareas[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// when the cursor moves away from the field, hide the hint
textareas[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}

青い字の部分を<textarea>タグ用に追加しました。
上記コードを適当なファイル(たとえば、formhint.jsという名前で保存)に保存します。

そして、各自環境に合わせてアップロードしてください。

次に、やっぱりサンプルページ中にスタイルが記述されています。
そちらも各自の環境に合わせて外部ファイル(たとえば、formhint.cssという名前で保存)に保存します。
以下はわたしのサイトで使っているCSSになります。

/******************************************/
/** ▼吹き出し関連▼ **/
/******************************************/
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
clear: both;
float:left;
width: 130px;
padding: 4px 0 2px 0;
text-align: left;
}
dd {
float: left;
width: 200px;
margin: 0 0 8px 0;
padding-left: 6px;
}
/* The hint to Hide and Show */
.hint {
display: none;
position: absolute;
/******
right: -250px;
******/
width: 200px;
margin-top: -4px;
border: 1px solid #525b89;
padding: 10px 6px 10px 12px;
background-color: #949bbf;
}
/* inputタグ用の吹き出し位置 */
.hint-input {
right: -60px;
}
/* textareaタグ用の吹き出し位置 */
.hint-textarea {
right: -150px;
}
/* The pointer image is hadded by using another span */
.hint .hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background: url(pointer.gif) left top no-repeat;
}
/******************************************/
/** ▲吹き出し関連▲ **/
/******************************************/

赤い字の部分をコメントにして、青い字の部分で<input>タグ、<textarea>タグ用の吹き出しの位置を調整します。

最後に吹き出しを入れたいフォームを変更します。
<head>~</head>の間に以下を追加します。

<link rel="stylesheet" href="<$MTBlogURL$>formhint.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>js/formhint.js"></script>
<script type="text/javascript">
addLoadEvent(prepareInputsForHints);
</script>

そして、吹き出しを表示するフォームにメッセージを追加します。
以下はわたしのサイトで使っているメールフォーム用のフォーム部を抜粋したものです。

<form method="post" id="mailform" name="mailform">
<input type="hidden" name="mail_post_template" id="mail_post_template" value="Mailform: Complete" />
<input type="hidden" name="mail_preview_template" id="mail_preview_template" value="Mailform: Preview" />
<input type="hidden" name="mail_error_template" id="mail_error_template" value="Mailform: Error" />
<input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
<div id="mailform-open-content">
<div id="mailform-open-data">
<p><label for="mail_author">Your Name:* </label><input id="mail_author" type="text" size="30" name="mail_author" />
<span class="hint hint-input">名前を入力してください。もちろんハンドル・ネームでもOKです。<span class="hint-pointer"> </span></span>
</p>
<p><label for="mail_email">Your Mail Address:* </label><input id="mail_email" type="text" size="30" name="mail_email" />
<span class="hint hint-input">メールアドレスを入力してください。<span class="hint-pointer"> </span></span>
</p>
<p><label for="mail_subject">Subject:* </label><input id="mail_subject" type="text" size="30" name="mail_subject" />
<span class="hint hint-input">メールのお題を入力してください。<span class="hint-pointer"> </span></span>
</p>
<p><label for="mail_text">Text:* </label><textarea id="mail_text" rows="10" cols="50" name="mail_text" /></textarea>
<span class="hint hint-textarea">メッセージをどうぞ♪<span class="hint-pointer"> </span></span>
</p>
</div>
<div id="mailform-open-footer">
<input type="submit" id="mail_preview" value="Preview" onclick="return ajax_preview();" />
<input type="submit" id="mail_post" value="Post" onclick="return ajax_post();" />
</div>
</div>
</form>