土曜日, 11月 19, 2005

コメント投稿フォーム Ver.3

コメント投稿フォームVer.1およびVer.2以上で完成度の高いもの。
以下、BloggerHacksより引用。


<!-- ** BLOGGER COMMENTS METEMPSYCHOSIS HACK ** -->
<!-- Version 1.03 -->
<!-- Copyright © 2004 Ebenezer Orthodoxy -->
<!-- http://boggerhacks.blogspot.com -->
<!-- -->
<!-- Modify the styles and options below to -->
<!-- customize the look of the comment form. -->
<!-- ***************** STYLES ***************** -->
<style type="text/css">
<!--
.commentForm
{ border-top:1px solid rgb(0,0,0);
border-bottom:1px solid rgb(0,0,0);
font-size:8pt;
width: 100%;}

.caption
{font-size:10pt;
text-align:center;
width: 400px;}

.nameBox
{width: 200px;
font-size:8pt;}

.emailBox
{width: 200px;
font-size:8pt;}

.urlBox
{width: 355px;
font-size:8pt;}

.toolbarBox
{width: 397px;
font-size:8pt;
padding:2px;
}

.commentBox
{width: 400px;
font-size:8pt;}

.buttonsDiv
{width: 400px;
text-align:center;}

.commentButton
{font-size:8pt;}

.previewButton
{font-size:8pt;}

a.toolbarButton
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
border-style: outset;}

a.toolbarButton:hover
{text-decoration:none;
cursor: default;}

a.toolbarButton:visited
{color: rgb(0,0,0);
text-decoration:none;}

a.toolbarPressed
{text-decoration:none;
color: rgb(0,0,0);
border-width: 1px;
padding: 0px 3px 0px 3px;
cursor: default;
border-style: inset;}
-->
</style>
<!-- ***************** OPTIONS ****************** -->
<script type="text/javascript" language="JavaScript1.2">
var formCaption= "Post a Comment";
var labelWidth = 40;
var nameLabel = "Name";
var emailLabel = "Email";
var urlLabel = "URL";
var rememberLabel = "Remember Me";
var postedByText = "Posted by";
var commentButtonText = "Post Comment";
var previewButtonText = "Preview";
var previewWindowTitle = "Comment Preview";
var confirmBeforePost = true;
var confirmText = "Post this comment?";
var boldButtonText = "B";
var italicsButtonText = "I";
var linkButtonText = "Link";
var linkPrompt = "Link Text:";
var urlPrompt = "Link URL:";
var quoteButtonText = "Quote";
var quotePrompt = "Use your mouse to select the text"+
" in the comment you want to quote.\n"+
"Then press the quote button.";
</script>
<!-- ******************* CODE ******************* -->
<!-- ************** DO NOT MODIFY *************** -->
<div class="commentForm">
<script type="text/javascript" language="JavaScript1.2">
var blogId;var postId;var clink='<$BlogItemCreate$>';
var today=new Date();var expiry=new Date(today.getTime()+
90*24*60*60*1000);var bpos=clink.indexOf('?');
var endpos=clink.indexOf('">');
var ppos=clink.indexOf('&'+'amp'+';postID=');if(bpos > -1){
blogId=clink.substring(bpos+8,ppos);}if (ppos > -1){
postId=clink.substring(ppos+12,endpos);}
function getAuthorInfo(frm){
var text="";var author=frm.author.value;
var email=frm.email.value; var url=frm.url.value;if
(author=="")author="Anonymous";if(url || email){
email=email.replace('@',' at ');
while(email.indexOf(".") > -1)
email=email.replace("."," dot ");
text+=postedByText+'<a><b> </b></a>'+
'<a title="'+email+'" href=';
if (url)text+='"'+url+'"';
else text+='"'+document.location+'"';
text+='>'+author+'</a>';}else
text+=postedByText+'<a><b> </b></a>'+author;
return text;}
function addTags(ltag,rtag){
if (document.all){var txt=
document.selection.createRange().text;
if (txt!=""){
document.selection.createRange().text=ltag+
txt+rtag;}}else if
(document.getElementById){
ta=document.CommentForm.Comment;
var sLen=ta.textLength;
var sStart=ta.selectionStart;
var sEnd=ta.selectionEnd;
if (rtag != '' && sStart==sEnd)return;
if(sEnd==1 || sEnd==2)sEnd=sLen;
var s1=(ta.value).substring(0,sStart);
var s2=(ta.value).substring(sStart,sEnd)
var s3=(ta.value).substring(sEnd,sLen);
ta.value=s1+ltag+s2+rtag+s3;}}
function makeLink()
{var ta = document.CommentForm.Comment;
if (document.all &&
document.selection.createRange().text){
linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else if (document.getElementById &&
ta.selectionStart < ta.selectionEnd)
{linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
addTags('<a href="'+linkurl+'">','</a>');
}else{var txt=prompt(linkPrompt,'');
if (txt==null || txt=='')return;
var linkurl=prompt(urlPrompt,'http://');
if (linkurl==null || linkurl=='' ||
linkurl=='http://')return;
insertText('<a href="'+linkurl+'">'+
txt+'</a>');}}
function storeCaret(ta){if
(ta.createTextRange)ta.caretPos=
document.selection.createRange().duplicate();}
function insertText(txt)
{var ta=document.CommentForm.Comment;
if (document.all){if
(ta.createTextRange && ta.caretPos){
var caretPos = ta.caretPos;caretPos.text=
caretPos.text.charAt(caretPos.text.length-1)==
' '?txt+caretPos.text+' ':txt+caretPos.text;}
else{ta.value = ta.value + txt;}}else if
(document.getElementById){addTags(txt,'');}}
function boldText(){addTags('<b>','</b>');}
function italText(){addTags('<i>','</i>');}
function quoteText()
{var txt=(document.all)?
document.selection.createRange().text:
window.getSelection();if(txt==null || txt==''){
alert(quotePrompt);
return;}insertText('"<i>'+txt+'</i>"');}
function press(lnk){lnk.className="toolbarPressed";}
function unpress(lnk){lnk.className="toolbarButton";}
function PreviewComment(frm){if (frm.Comment.value=='')
return;var preview=window.open('','Preview',
'width=400,height=300,resizable=yes,toolbar=no,'+
'location=no,directories=no,status=yes,scrollbars=yes,'+
'menubar=no');preview.document.open();
var text=frm.Comment.value+"<br/><br/>"+
getAuthorInfo(frm);while(text.indexOf("\n") > -1)
text=text.replace("\n","<br/>");
preview.document.write('<html><head><title>'+previewWindowTitle+
'</title></head><bo'+'dy>'+text+'</body></html>');
preview.document.close();}
function PostComment(frm){if (frm.Comment.value=="" ||
(confirmBeforePost &&
confirm(confirmText)==false))return;
if(frm.rememberMe.checked){
setCookie('author',frm.author.value);
setCookie('email',frm.email.value);
setCookie('url',frm.url.value);
setCookie('remember','true');}else{
setCookie('remember','false');}
var txt=frm.Comment.value;
txt=txt.replace('</i>','</i>&'+'#'+'160;');
txt= txt.replace('</b>','</b>&'+'#'+'160;');
txt=txt.replace('</a>','</a>&'+'#'+'160;');
frm.postBody.value=txt;
frm.postBody.value+="&"+"#1"+"60;\n\n<a></a><a></a>"+
getAuthorInfo(frm);
frm.submit();}
function toggleRemember(frm){if(frm.rememberMe.checked)
setCookie('remember','true');else
setCookie('remember','false');}
function getCookie(name){var rexp = new RegExp(name +
"=([^;]+)");var val=rexp.exec(document.cookie);
return (val!=null)?unescape(val[1]):"";}
function setCookie(name, value){document.cookie=name+
"="+escape(value)+";expires="+expiry.toGMTString();}
document.write('<div id="post" class="caption">'+
formCaption+'<br/>');if(!document.all)
document.write("<br/>");</script></div>
<form name="CommentForm"
action="http://www.blogger.com/add-comment.do"
method="post"><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+nameLabel);</script>:</div>
<input type="text" name="author" class="nameBox"
tabindex="1"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+emailLabel);</script>:</div>
<input type="text" name="email" class="emailBox"
tabindex="2"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">'+urlLabel);</script>:</div>
<input type="text" name="url" class="urlBox"
tabindex="3"/></div><div style="vertical-align: middle;">
<script type="text/javascript" language="JavaScript1.2">
document.write('<div style="width:'+labelWidth+
'px;float:left;">&'+'#160');</script></div>
<input type="checkbox" name="rememberMe"
tabindex="4" style="vertical-align: middle;"
onclick="toggleRemember(document.CommentForm);">
<script type="text/javascript" language="JavaScript1.2">
document.write(rememberLabel);</script></input></div>
<div class="toolbarBox" style="text-align:right">
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:boldText();"><b>
<script type="text/javascript" language="JavaScript1.2">
document.write(boldButtonText);</script></b></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:italText();"><i>
<script type="text/javascript" language="JavaScript1.2">
document.write(italicsButtonText);</script></i></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:makeLink();">
<script type="text/javascript" language="JavaScript1.2">
document.write(linkButtonText);</script></a>
<a class="toolbarButton" onmousedown="press(this);"
onmouseup="unpress(this)" href="javascript:quoteText();">
<script type="text/javascript" language="JavaScript1.2">
document.write(quoteButtonText);</script></a></div>
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="hidden" name="blogID" value="'+
blogId+'"/>\n<input type="hidden" name="postID" value="'+
postId+'"/>');</script><textarea name="Comment" rows="10"
class="commentBox" tabindex="5" onselect="storeCaret(this);"
onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
<input type="hidden" name="postBody"/>
<input type="hidden" name="anonymous" value="y"/>
<div class="buttonsDiv">
<script type="text/javascript" language="JavaScript1.2">
document.write('<input type="button"'+
' class="commentButton" tabindex="6" name="post"'+
' onclick="PostComment(document.CommentForm);" value="'+
commentButtonText+'"/>');
document.write('<input type="button" class="previewButton"'+
' tabindex="7" name="preview"'+
' onclick="PreviewComment(document.CommentForm);" value="'+
previewButtonText+'"/>');</script><br/>
<span style="font-size:7pt;text-align:center;">
<a title="Metempsychosis Comments Hack from BloggerHacks"
href="http://bloggerhacks.blogspot.com">BloggerHacks</a>
</span></div></form>
<script type="text/javascript" language="JavaScript1.2">
var cfrm=document.CommentForm;var remember=
getCookie('remember');if(remember=="true")
{cfrm.rememberMe.checked=true;cfrm.author.value=
getCookie('author');cfrm.email.value=getCookie('email');
cfrm.url.value=getCookie('url');}
</script></div>
<!-- ***********END METEMPSYCHOSIS HACK********** -->