Movable Type 備忘録

 Form field hints with CSS and JavaScript

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

こんにちわ^^

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

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

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

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

設置方法

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

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

  1. function addLoadEvent(func) {
  2.   var oldonload = window.onload;
  3.   if (typeof window.onload != 'function') {
  4.     window.onload = func;
  5.   } else {
  6.     window.onload = function() {
  7.       oldonload();
  8.       func();
  9.     }
  10.   }
  11. }
  12.  
  13. function prepareInputsForHints() {
  14.     var inputs = document.getElementsByTagName("input");
  15.     for (var i=0; i<inputs.length; i++){
  16.         // test to see if the hint span exists first
  17.         if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
  18.             // the span exists! on focus, show the hint
  19.             inputs[i].onfocus = function () {
  20.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  21.             }
  22.             // when the cursor moves away from the field, hide the hint
  23.             inputs[i].onblur = function () {
  24.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  25.             }
  26.         }
  27.     }
  28.  
  29.     // repeat the same tests as above for selects
  30.     var selects = document.getElementsByTagName("select");
  31.     for (var k=0; k<selects.length; k++){
  32.         if (selects[k].parentNode.getElementsByTagName("span")[0]) {
  33.             selects[k].onfocus = function () {
  34.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  35.             }
  36.             selects[k].onblur = function () {
  37.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  38.             }
  39.         }
  40.     }
  41.  
  42.     var textareas = document.getElementsByTagName("textarea");
  43.     for (var i=0; i<textareas.length; i++){
  44.         // test to see if the hint span exists first
  45.         if (textareas[i].parentNode.getElementsByTagName("span")[0]) {
  46.             // the span exists! on focus, show the hint
  47.             textareas[i].onfocus = function () {
  48.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  49.             }
  50.             // when the cursor moves away from the field, hide the hint
  51.             textareas[i].onblur = function () {
  52.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  53.             }
  54.         }
  55.     }
  56. }

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

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

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

  1. /******************************************/
  2. /** ▼吹き出し関連▼ **/
  3. /******************************************/
  4. dl {
  5.     font:normal 12px/15px Arial;
  6.     position: relative;
  7.     width: 350px;
  8. }
  9. dt {
  10.     clear: both;
  11.     float:left;
  12.     width: 130px;
  13.     padding: 4px 0 2px 0;
  14.     text-align: left;
  15. }
  16. dd {
  17.     float: left;
  18.     width: 200px;
  19.     margin: 0 0 8px 0;
  20.     padding-left: 6px;
  21. }
  22.  
  23.  
  24. /* The hint to Hide and Show */
  25. .hint {
  26.        display: none;
  27.     position: absolute;
  28. /******
  29.     right: -250px;
  30.  ******/
  31.     width: 200px;
  32.     margin-top: -4px;
  33.     border: 1px solid #525b89;
  34.     padding: 10px 6px 10px 12px;
  35.     background-color: #949bbf;
  36. }
  37.  
  38. /* inputタグ用の吹き出し位置 */
  39. .hint-input {
  40.     right: -60px;
  41. }
  42.  
  43. /* textareaタグ用の吹き出し位置 */
  44. .hint-textarea {
  45.     right: -150px;
  46. }
  47.  
  48. /* The pointer image is hadded by using another span */
  49. .hint .hint-pointer {
  50.     position: absolute;
  51.     left: -10px;
  52.     top: 5px;
  53.     width: 10px;
  54.     height: 19px;
  55.     background: url(pointer.gif) left top no-repeat;
  56. }
  57. /******************************************/
  58. /** ▲吹き出し関連▲ **/
  59. /******************************************/

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

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

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

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

  1. <form method="post" id="mailform" name="mailform">
  2.     <input type="hidden" name="mail_post_template" id="mail_post_template" value="Mailform: Complete" />
  3.     <input type="hidden" name="mail_preview_template" id="mail_preview_template" value="Mailform: Preview" />
  4.     <input type="hidden" name="mail_error_template" id="mail_error_template" value="Mailform: Error" />
  5.     <input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
  6.  
  7.     <div id="mailform-open-content">
  8.         <div id="mailform-open-data">
  9.             <p><label for="mail_author">Your Name:* </label><input id="mail_author" type="text" size="30" name="mail_author" />
  10.                <span class="hint hint-input">名前を入力してください。もちろんハンドル・ネームでもOKです。<span class="hint-pointer">&nbsp;</span></span>
  11.             </p>
  12.             <p><label for="mail_email">Your Mail Address:* </label><input id="mail_email" type="text" size="30" name="mail_email" />
  13.                <span class="hint hint-input">メールアドレスを入力してください。<span class="hint-pointer">&nbsp;</span></span>
  14.             </p>
  15.             <p><label for="mail_subject">Subject:* </label><input id="mail_subject" type="text" size="30" name="mail_subject" />
  16.                <span class="hint hint-input">メールのお題を入力してください。<span class="hint-pointer">&nbsp;</span></span>
  17.             </p>
  18.             <p><label for="mail_text">Text:* </label><textarea id="mail_text" rows="10" cols="50" name="mail_text" /></textarea>
  19.                <span class="hint hint-textarea">メッセージをどうぞ♪<span class="hint-pointer">&nbsp;</span></span>
  20.             </p>
  21.         </div><!-- mailform-open-data -->
  22.  
  23.         <div id="mailform-open-footer">
  24.             <input type="submit" id="mail_preview" value="Preview" onclick="return ajax_preview();" />
  25.             <input type="submit" id="mail_post" value="Post" onclick="return ajax_post();" />
  26.         </div><!-- mailform-open-footer -->
  27.     </div><!-- mailform-open-content -->
  28. </form>

青い字の部分のように吹き出しメッセージを追加します。
一通り追加したら再構築します。

以上でちょっとした吹き出しメッセージを表示することができました ( ̄∇ ̄)/

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード