• 技术
• 网事
• 资源
• 生活
• 域名主机
• 存档
• 链接
• 关于

昨日写了“ 博客留言少谁之过”一文，其中提到增加留言的方法，其中写到活着就在文章页面的侧栏添加了第二个快速留言功能。那么这个功能要怎么实现呢？

说难不难，说容易也不容易。这里需要用到的两个东西主要是评论框模版和Javascript的自动添加功能，至于后者可以参考“自动填充文本输入框Javascript特效代码”一文。那么下面就来制作一下我们的第二个留言评论框吧。

1.制作Javascript功能函数

利用我们在“自动填充文本输入框Javascript特效代码”一文中介绍的函数，稍微进行修改得到如下的函数。

function refreshValue(a) {
var s = a.value;
var b = a.name;
document.getElementById(b).value=s;
}

把如上的代码保存好备用。

2.制作第二个留言评论框界面

首先，打开我们的评论框模版，也就是主题模版中的b_article_commentpost.html文件，复制其中的内容。

然后，做如下修改：

<form target=”_self” method=”post” action=”<#article/commentposturl#>” >
<input type=”hidden” name=”inpId” value=”<#article/id#>” onkeyup=”refreshValue(this)” />
<input type=”hidden” name=”inpArticle” value=”" onkeyup=”refreshValue(this)” />
<input type=”hidden” name=”inpLocation” value=”" onkeyup=”refreshValue(this)” />
<p> <input type=”text” name=”inpName” class=”text” value=”" size=”25″ tabindex=”1″ onkeyup=”refreshValue(this)” />
<label for=”inpName”><#ZC_MSG001#></label> </p>
<p> <input type=”text” name=”inpEmail” class=”text” value=”" size=”25″ tabindex=”2″ title=”您的Email地址不被会被公开” onkeyup=”refreshValue(this)” /> <label for=”inpEmail”><#ZC_MSG053#>&nbsp;&nbsp;</label>
<input type=”text” name=”inpHomePage” class=”text” value=”" size=”25″ tabindex=”3″ onkeyup=”refreshValue(this)” />
<label for=”inpHomePage”><#ZC_MSG054#></label> </p>
<p> <textarea name=”txaArticle” title=”留言最长字数1000″ onChange=”GetActiveText(this.id);” onClick=”GetActiveText(this.id);” onFocus=”GetActiveText(this.id);” class=”mytext” cols=”50″ rows=”4″ tabindex=”5″ onkeyup=”refreshValue(this)” ></textarea> </p>
<p> <input name=”btnSumbit” type=”submit” tabindex=”6″ value=”<#ZC_MSG087#>” onClick=”JavaScript:return VerifyMessage()” class=”button” /> <input type=”checkbox” name=”chkRemember” value=”1″ onkeyup=”refreshValue(this)” /> <label for=”chkRemember”><span class=”justtips”>下次回复不用重新输入个人信息</span></label> </p> </form>

可以看到，以上仅仅在每个输入框添加了onkeyup=”refreshValue(this)”属性，而且把每个输入框的id属性去掉了。

将以上代码保存备用.

3.直接在z-blog后台修改b_article_commentpost.html文件

找到tabindex属性，文件中应该有5处，后面有一个数字分别为1、2、3、5、6，把这几个数字改为7、8、9、10、11。然后后台保存修改。

这样做的原因是当用户使用“Tab”键选择下一个输入框时能够以正确的顺序依次进行。

4.在z-blog后台修改single.html文件

将以上第一步保存的Javascript代码放入页面头部的<script></script>标签中。

把第二步保存的“留言评论框界面”界面放入single.html文件中你需要添加的位置。

保存以上修改。

5.重建文件，美化第二个评论框

后台选择文件重建就可以了，如果你还需要美化一下输出界面，可以使用CSS进行美化。

6.注意事项

第二个甚至第三个留言评论框不能直接拷贝b_article_commentpost.html文件内容，否则用你自己额外添加的输入框时将出现提示评论不正确的结果。

还有其他特殊功能，用户可自己在以上基础进行修改。以上就是活着添加第二个留言评论框评论框的一些经验。

留下评论