添加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. 没有通告