Movable Type 備忘録
Form field hints with CSS and JavaScript
- Next Page: whos.amung.us
- Prev Page: ブラウザの機能を取得するget_browserを使えるようにする
こんにちわ^^
学生はいいですね。春休みですもんね。
山手線の中で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><!-- mailform-open-data -->
<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><!-- mailform-open-footer -->
</div><!-- mailform-open-content -->
</form>
青い字の部分のように吹き出しメッセージを追加します。
一通り追加したら再構築します。
以上でちょっとした吹き出しメッセージを表示することができました (￣∇￣)/
Trackback Pings(0)
No trackbacks found.
Comments(0)
No comments found.
Post a Comment