Movable Type 備忘録

 Highlight active input

眠いでオジャる（つω-`｡）

今日も朝早くから出かけて「ハンニバル・ライジング」観てきました。
今作品はレクター博士の少年・青年時代のストーリー。

レクター博士らしき残忍さはなかったけど、わたし的にはおもしろかったです。

さて、先ほど友人からメルが届きました。
いつもなら携帯にダイレクト・コールなのに、なぜか今回はメル…（。－ω－）

わたしのサイトのメールフォームでは、各入力項目にフォーカスがあたるとハイライト表示するようにしています。
そのやり方を教えて欲しいとのことでした。

今回に限ってなぜメルだったのか…それは、わたしのメールフォームのテストも兼ねて…だそうです。
易しい友人を持って幸せ!? なbzbellです (;￣∇￣A

まずはサンプルですね。
わたしのサイトのメールフォームの各入力項目で確認してください。
メールフォーム

フォーカスイベント／ブラーイベント

フォームの各入力項目にフォーカスされた場合(フォーカスイベント)強調表示を、フォーカスを失った場合(ブラーイベント)強調表示解除の方法について説明します。

入力項目(<input>、<textarea>)にはonfocusイベント、onblurイベントというものがあります。
それぞれフォーカス IN、フォーカス OUTを意味します。

<input>、<textarea>で個々に指定すると、以下のようになります。

上記は以下のようなタグになります。

  1. <fieldset>
  2. <script type="text/javascript">
  3. function ev_onfocus(obj) {
  4.    if (obj.style) obj.style.backgroundColor='#5365c1';
  5. }
  6. function ev_onblur(obj) {
  7.    if (obj.style) obj.style.backgroundColor='#f4f6fb';
  8. }
  9. </script>
  10.  
  11. <label for="focus_test">Please Focus IN/OUT: </label>
  12. <input id="focus_test" type="text" size="30" name="focus_test"
  13. onfocus="ev_onfocus(this)"
  14. onblur="ev_onblur(this)"
  15. style="background-color: #f4f6fb;" />
  16. </fieldset>

このように個々に指定してもいいのですが、わたし的にはかなり面倒です (;￣∇￣A
そこでJavaScript & CSSを使ってカンタンにやってみます。

カスタマイズ

今回使用するJavaScriptはDHTMLgoodies.comさんとこで配布されてるhighlight-active-input.jsを使用しました。

  1. まずJavaScriptをダウンロードします。
    上記URLからhighlight-active-input.zipという圧縮ファイルをダウンロードして、適当なフォルダに展開します。

    そして、サーバにアップロードします。アップロード先はどこでも構いませんので、各自の環境に合わせてアップロードしてください。

  2. 次にテンプレートを変更します。
    以下のコードを<head>~</head>の間に追加します。

    JavaScript定義

    1. <script type="text/javascript" src="<$MTBlogURL$>js/highlight-active-input.js"></script>

    青い字の部分を各自の環境に合わせて変更します。
    そして、</body>タグの直上あたりに以下のコードを追加します。

    JavaScript実行

    1. <script type="text/javascript">
    2. <!--
    3. initInputHighlightScript();
    4. //-->
    5. </script>

  3. 最後にCSSを変更します。
    具体的にはハイライト時のスタイルを定義してあげるだけです。

    スタイル定義

    1. .inputHighlighted {
    2.     background-color: #5365c1 !important;
    3.     color: #d3d9f0;
    4. }

    highlight-active-input.jsによってハイライトされると青い字のクラス名が付加されます。
    そのときのスタイルを各自のお好みで定義してください (￣∇￣)/

以上で完了です。
後は再構築して、表示確認を行ってください。

注意点

わたしのサイトのメールフォームでは、フォーカスイベント、ブラーイベントを使うJavaScriptが、困ったことに2人います（つω-`｡）
こちらのForm field hints with CSS and JavaScriptと競合してしまいます。

そのようなケースの場合、思った動作しませんのでご注意ください。

ですので、わたしの場合はForm field hints with CSS and JavaScript側のJavaScriptをカスタマイズして使用しています。
具体的には以下のようにカスタマイズしました。

formhint.js

  1. var currentlyActiveInputClassName = false;
  2.  
  3. function addLoadEvent(func) {
  4.   var oldonload = window.onload;
  5.   if (typeof window.onload != 'function') {
  6.     window.onload = func;
  7.   } else {
  8.     window.onload = function() {
  9.       oldonload();
  10.       func();
  11.     }
  12.   }
  13. }
  14.  
  15. function prepareInputsForHints() {
  16.     var inputs = document.getElementsByTagName("input");
  17.     for (var i=0; i<inputs.length; i++){
  18.         // test to see if the hint span exists first
  19.         if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
  20.             // the span exists! on focus, show the hint
  21.             inputs[i].onfocus = function () {
  22.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  23.  
  24.                 // ハイライト表示追加 by bzbell
  25.                 currentlyActiveInputClassName = this.className;
  26.                 this.className = 'inputHighlighted';
  27.             }
  28.             // when the cursor moves away from the field, hide the hint
  29.             inputs[i].onblur = function () {
  30.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  31.  
  32.                 // ハイライトを元に戻す by bzbell
  33.                 this.className = currentlyActiveInputClassName;
  34.             }
  35.         }
  36.     }
  37.  
  38.     // repeat the same tests as above for selects
  39.     var selects = document.getElementsByTagName("select");
  40.     for (var k=0; k<selects.length; k++){
  41.         if (selects[k].parentNode.getElementsByTagName("span")[0]) {
  42.             selects[k].onfocus = function () {
  43.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  44.  
  45.                 // ハイライト表示追加 by bzbell
  46.                 currentlyActiveInputClassName = this.className;
  47.                 this.className = 'inputHighlighted';
  48.             }
  49.             selects[k].onblur = function () {
  50.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  51.  
  52.                 // ハイライトを元に戻す by bzbell
  53.                 this.className = currentlyActiveInputClassName;
  54.             }
  55.         }
  56.     }
  57.  
  58.     var textareas = document.getElementsByTagName("textarea");
  59.     for (var i=0; i<textareas.length; i++){
  60.         // test to see if the hint span exists first
  61.         if (textareas[i].parentNode.getElementsByTagName("span")[0]) {
  62.             // the span exists! on focus, show the hint
  63.             textareas[i].onfocus = function () {
  64.                 this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
  65.  
  66.                 // ハイライト表示追加 by bzbell
  67.                 currentlyActiveInputClassName = this.className;
  68.                 this.className = 'inputHighlighted';
  69.             }
  70.             // when the cursor moves away from the field, hide the hint
  71.             textareas[i].onblur = function () {
  72.                 this.parentNode.getElementsByTagName("span")[0].style.display = "none";
  73.  
  74.                 // ハイライトを元に戻す by bzbell
  75.                 this.className = currentlyActiveInputClassName;
  76.             }
  77.         }
  78.     }
  79.  
  80. }

青い字の部分を追加することで、フォーカスイベント、ブラーイベントの競合を回避しました (●＞∀＜●)

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード