Alternative Design Project

ADP: クッキーとValidなStrict HTML(続)

2004年03月16日 23:46 | コメント(5) | トラックバック(1)

[これまでのあらすじ。XHTML 1.0 Strictなんかではformにname属性は使えないので、クッキーの表示にDOMを使ったのがクッキーとValidなStrict HTMLのはなし。表示でDOMを使ったんだから、Remember info?ときくところでもDOMを使えば、と考えて、失敗したのがうまくいかないのはなし。]

同様のことで悩んでらっしゃる方がいるので心強かったり。

うまくいかない、のほうでも、別にミスらしいミスはなく、IE6の怪しい挙動が原因なので、しぶしぶ違うやり方を試してみた。document.writeを使うのは、ちょっと気がひけるが、やむをえず。

メリットは、上で書いたように、HTMLはValidになり、かつ、Netscape Navigator 4やiCabのようにDOMをサポートしていない(または実装が不完全な)UAではRemember info?と聞いてこなくなること。

やり方。以下のmtcmt.jsとmtcmt2.jsを<$MTBlogURL$>に放り込む。

mtcmt.js

if (document.getElementById && document.createElement){
 var r = document.getElementById('remember');
 if (r.childNodes[0]) r.removeChild(r.childNodes[0]);
 document.write('Remember info? <label for="bakecookie">Yes</label><input id="bakecookie" type="radio" name="bakecookie" /> <label for="forget">No</label><input id="forget" type="radio" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" />');
}

mtcmt2.js

if (document.getElementById && document.createElement){
 document.getElementById('email').setAttribute('value',getCookie('mtcmtmail'));
 document.getElementById('author').setAttribute('value',getCookie('mtcmtauth'));
 document.getElementById('url').setAttribute('value',getCookie('mtcmthome'));
 if (getCookie('mtcmtauth')) {
   document.getElementById('bakecookie').setAttribute('checked','checked');
 } else {
   document.getElementById('forget').setAttribute('checked','checked');
 }
}

んで、Individual Entry Archiveのformとその下のscript呼び出し部分。

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<p><input type="hidden" name="static" value="1" /><input type="hidden" name="entry_id" value="<$MTEntryID$>" /></p>
<dl>
<dt><label for="author">Name</label>: </dt>
<dd><input id="author" name="author" size="30" tabindex="1" value="" /></dd>
<dt><label for="email">Email Address</label>: </dt>
<dd><input id="email" name="email" size="30" tabindex="2" value="" /></dd>
<dt><label for="url">URL</label>: </dt>
<dd><input id="url" name="url" size="30" tabindex="3" value="" /></dd>
<dt id="remember"><input type="hidden" name="bakecookie" value="Forget Info" /><script type="text/javascript" src="<$MTBlogURL$>mtcmt.js"></script></dt>
<dt><label for="comments">Comments</label>: </dt>
<dd><textarea id="comments" name="text" rows="7" cols="50" tabindex="4"></textarea></dd>
<dt><input id="button-post" type="submit" name="post" value="Post" title="投稿" /></dt>
</dl>
</form>
<script type="text/javascript" src="<$MTBlogURL$>mtcmt2.js"></script>

idはだいたいMTのデフォルトテンプレートに準拠(確認ボタンははずしちゃいましたが)。ほかは、ふつうでうまくいくはず。ADPではこのやり方にしたんで、参考にされる方は適宜挙動やソースなどを見てみてくださいな。

トラックバック(1)

トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/86

id 属性と name 属性 (4)(dotnote Days...): 2004年03月18日 01:39
丸パクリ http://d.dotnote.jp/id/2004/03/17#s01 id 属性と name 属性 (3) の続き。 この件については Momomo さん ( Alternative Design Project by Momomo ) が色々と尽力されています。 同様のことで悩んでらっしゃる方がいるので心強かったり。 と言われていますが、...

コメント(5)

Momomo: 2004年03月17日 12:23

DOMを使って、っていう表現、かなり間違っている気がしてきました。どういう書き方だといいんだろうか。

Momomo: 2004年03月17日 12:37

DOM Level 2 Coreってのが無難な表現?

Momomo: 2004年03月17日 13:13

http://adp.daa.jp/archives/000089.html [ちゃんと仕様書は読みませう>自分]に書きました。

note: 2004年03月18日 01:41

すみません、トラックバックを送る際にミスしました……。
01:34 AM の方は消してください。お願いします。

Momomo@IE: 2004年03月18日 01:45

トラックバックありがとうございます。消しました。念のため、IE6でコメント実験。

コメントの内容確認のため、反映されるまで時間がかかる場合があります。e-mailはサイトに掲載されません。

このページの先頭へ