添加WordPress的邮箱表单自动完成功能  

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

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><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部分：

程序代码:
#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评论完全兼容。

本来来源:企鹅

欢迎大佬支持本博客的发展 -- Donate --

本文链接：添加WordPress的邮箱表单自动完成功能

转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：三十岁，谢谢！^^


分享到：          

  1. 除了上面的那还有其它邮箱呢？

  2. 很不错啊，回头试试

  1. 没有通告