前天在登录某网站时,注意到邮箱的自动补完功能很方便,随着键盘的敲击,邮箱的提示也在不断变换,只要按上下键回车或者用鼠标点击便可以免去输入冗长的邮箱后缀,是一个非常便捷高实用的功能。于是便考虑 WordPress 评论中的邮箱表单是否能够实现此功能,搜索的结果大多都是 ajax 和数据库/本地都支持的,这对于一个小小的邮箱表单自动完成功能来说都太过于麻烦和臃肿,不过好在找到一篇非常棒的文章,代码非常精简,能满足基本的需求:

StyleChen雨夜带刀的《Email Suggest 邮箱输入提示》:http://stylechen.com/email-suggest.html

这篇文章就是将这个代码改造到 WordPress 上。

HTML部分:

将原文中 HTML 代码按照自己主题的样式复制到 comment.php(一般为此文件)中即可,其中邮箱后缀列表可以自定义。
我的 HTML 代码如下,基本没有做太大变动:

<div id="login_box">
  <div class="welcome-new">
    <input type="text" name="email" id="email" autocomplete="off" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2"/>
    <label for="email">邮箱(不会公布)*</label>
  </div>
  <ul id="email_list">
    <li id="nocursor">有您的邮箱吗?</li>
    <li></li>
    <li>@gmail.com</li>
    <li>@qq.com</li>
    <li>@sina.com.cn</li>
    <li>@163.com</li>
    <li>@126.com</li>
    <li>@sohu.com</li>
    <li>@hotmail.com</li>
    <li>@live.cn</li>
    <li>@yahoo.cn</li>
  </ul>
</div>

JavaScript部分:

由于此代码必须获得 ID 为"email"的元素,如果页面评论表格为空,既没有登录的状态,则该代码可以正常工作;如果处于没有评论的页面,或者处在登录状态的评论页面,就会产生不能取得 ID 为"email"元素内容的错误,所以要在此代码之上加入一个判断,判断当前页面是否有 ID 为"email"的元素。

jQuery(document).ready(
function($){
if(document.getElementById("email")){
(原作者代码)
};
});

CSS 部分:

原作者的 CSS 部分规定了 #email_list li 的属性 overflow:hidden,这样就会在 webkit 内核的浏览器中出现问题:输入文字长度超过默认像素时(即使不规定 width)将会被隐藏,而在其它内核浏览器中不会出现这个问题,所以建议将这个 CSS 属性去掉。
我的 CSS 代码如下,也基本没有变动= =

#login_box { position:relative; }
.clearfix label{font-size:14px; float:left; }
.clearfix {height:30px; line-height:30px; }
.clearfix:after{height:0; visibility:hidden; content:'.'; overflow:hidden; display:block; }
#email_list {min-width:150px;list-style:none; border:1px solid #74c9e6;position:absolute;top:0;left:150px; background:#fff; display:none; }
#email_list li {text-indent:5px;width:100%; height:20px; line-height:20px;cursor:pointer; }
#email_list #nocursor { cursor:default; }
#email_list .current {background:#baeafb; }

重要补充:根据浏览器的不同,可能在使用自动完成时通过回车输入邮箱,会导致表单的自动提交,所以还要对表单进行如下改造:

//将
<input name="submit" type="submit" id="submit" class="comment_submit" tabindex="5" value="提交(Ctrl+Enter)" />
//改为
<input name="submit" type="button" id="submit" class="comment_submit" tabindex="5" value="提交(Ctrl+Enter)" />

不过这样,直接点击该按钮就不能实现提交功能了,so:

$('#submit').click(function(e){
    $('#commentform').submit();
});

加入到 javascript.js 等 JS 文件中,利用 jQuery,实现点击提交。
通过以上改造,可以在 IE,Firefox,Chrome 最新版本中实现不通过回车键自动提交表单。但是 Maxthon3 不行,仍然会提交表单,这和 Chrome 等 Webkit 引擎浏览器的较早版本表现是一致的,所以还要继续改造:

//在 input 标签内加入一个属性 onkeypress="return noenter(event)"
<input type="text" name="email" id="email" onkeypress="return noenter(event)" autocomplete="off" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2"/>

即发生按键事件时执行 noenter 函数,在 javascript.js 等 JS 文件中,加入

function noenter(event) {
  if(event.keyCode == 13){   
  return false;}
};

把回车事件忽略,顺便还把 IE 中表单按回车讨厌的提示声去掉了,另外这段函数不要放在 jQuery 内。

以上和 willin 的 ajax 评论完全兼容。

  1. JS 好长啊……刚才调试了一下实现了,载入代价比较大~ 还是放弃了~ 嘿嘿 :???: