Mootoolsの$関数がformで変な挙動をする件

高橋文樹

2008 年 9 月 14 日
最終更新： 2010 年 3 月 10 日
読了3分（2,255文字）
Javascript PHP 言語

この投稿は 16年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

ぼくは文芸の世界に生きる人間なので、やっぱりテキストが大好きです。なので、RIA（リッチ・インターネット・アプリケーション）を導入するにしても、やっぱり「動画・アニメーション」というイメージのあるflashよりも、テキストをそのまま装飾できるJavascriptの方が好きだったりします。

で、普段はMootoolsを使っています。バージョンが1.2に上がってからシンプルなレイアウトになってしまいましたが、ぼくが始めて見た1.11の時（2007/7）にはダークで怪しげかつグイングイン動き、デモもオサレだったのです（ここでまだ見られます。）。

このMootools、「最悪なのはコピペで済ませることだ」と書いてあるように、ちょっと敷居が高い感じです。それに、日本語情報はほとんど皆無。ぼくもかつてはドキュメンテーションの全訳を試みましたが、その直後にバージョンが1.2に上がってしまったので、諦めた口です。

が、これまではそれでもなんとか使いこなしており、そんなにエラーも出なかったのですが、破滅派の投稿フォームに実装していたバリデーション機能を修正していたとき、小一時間ほどハマりました。例によってIEでしたが、firefoxでもエラーが出ました。

実装した機能

フォームにマウスオーバーすると、右にボックスが下りてきて、対話式にチュートリアルをしてくれる。
inputタグをクリックすると、背景色が白くなって、自分がいまどこに入力しているか教えてくれる。
「投稿ははじめてですか？」や「連載ものですか？」にチェックを入れると、新しい入力欄がふわっと出てくる。
送信をクリックすると、間違っている欄に注意書きが出て、再入力を促す。

とまあ、通り一遍のことをやってみたのですが、こんなエラーが出ちゃいました。

firefoxで<input type=”file” />をクリックしても、ファイルを選択するダイアログが出ない
5つの式で実現していた上の機能がIEではそもそも動かない

ファイルのダイアログが出ないエラーに関しては、とりあえず背景色が白くなるフォーカス・ブラーイベントを添附しないことで回避。

どうやら、inputタグにあれこれとイベントを添附するとおかしなことになるようです。buttonやtextなら問題ないけれど、fileは駄目なようです。イベントを上書きしてしまうのかな？

一応、無名関数ではなく、きちんと名前をつけた関数で登録したんですが、駄目でした。

で、IEの「そもそもすべてが動かない」ということに関しては、さんざんググった挙句、英語情報しかなくてテキストオンリーの目がクラクラするMootoolsフォーラムでヒントを見つけました。

とにかく、uidってのはMootoolsがすべてのHTML要素に対して割り当てている固有のIDのことだし、Internet explorerは瞭かにformフィールドを特別扱いしているからね。

解決法：Mootoolsの要素や属性名をformのinputのname属性に使わないこと。

出典：Valerio in Mootools Forum 高橋文樹訳

なるほど……さすが外人プログラマー。Ajaxフレームワークの構造を理解した上で使っていらっしゃる……コピペで済ませようとするそこいらのへっぽこプログラマーとは偉い違いだ……

と、上記をヒントにして、「Mootoolsはform周りが怪しい」というめぼしを立ててみると、機能1「対話式チュートリアル」周りの関数内で、なんと$関数がエラーを起こしているではないですか！

HTML

<form id="toukou" name="toukou" action="hoge.php">
     <!-- inputタグ色々 -->
</form>

Javascript

var toukou = $('toukou'); // <-これがエラー

toukou.addEvent('mouseenter',makeHint.bindWithEvent(toukou));
toukou.addEvent('mouseleave',makeHint.bindWithEvent(toukou));

function makeHint(){
    //なんかいろいろと処理を行う
}

で、この”var toukou = $(‘toukou’);”がすでにエラーを起こしているわけです。そんなことってある？　と驚きを隠せないまま、formにイベント添附することをやめ、fieldsetに添附してみました。

HTML

<form id="toukou" name="toukou" action="hoge.php">
   <fieldset id="toukouField">
     <!-- inputタグ色々 -->
   </fieldset>
</form>

Javascript

var toukou = $('toukouField'); // <-変更部分

toukou.addEvent('mouseenter',makeHint.bindWithEvent(toukou));
toukou.addEvent('mouseleave',makeHint.bindWithEvent(toukou));

function makeHint(){
    //なんかいろいろと処理を行う
}

$関数といえば、”document.getElementById(element)”のショートハンドであると同時に、要素を拡張してくるもっとも基本的な関数なんですが、こんなこともあるんですね。

ともかく、これでまったく問題なく動きました。近々アップ予定なので、文芸作品を持っている方は、投稿してください。