jquery插件 邮箱后缀自动匹配 可自定义
上次制作了一个失败的邮箱提示插件. 经过失败后,知道错误在了 对 目标对象 的没有搞清楚.以至于重新写了一个.
进过多次测试. 目前的效果算是比较满意的.
唯一不满意的地方是keyup事件的问题. 如果使用 keypress 事件可以即使得到文本框的值,不过会慢一拍.
示例:
View Code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
$("em").text($(this).val());
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
<p>input的值:<em></em></p>
</body>
</html>
如果需要即使获取文本框的值 , 对于此问题,已有人研究出了相应的解决方案,感兴趣的可以点击:http://iunicorn.googlecode.com/svn-history/r7/trunk/tmp/Untitled.txt
详细描述了 键盘事件 在各个浏览器下,和是否开启输入法的情况.
不过 如果对 input 设置 ime-mode: disabled; 属性 可以忽略用户的输入法,直接以字母键入. 比如在一些不为中文输入框可以应用.
详细介绍和参数:https://developer.mozilla.org/en/CSS/ime-mode
<input type="email" name="user_email" style="ime-mode: disabled;" />
效果 e-mail:
细心的读者会发现 input 的type="email" 这是 html5 引进的新的 input 类型. 浏览器 不支持 此类型 默认会以 text 类型渲染,并不会报错.可大胆使用.并且在高级的浏览器 如 firefox opear chrome.
在 firefox 浏览器下键入不符合 email 类型的值 当移除光标 输入框会被高亮.
在iPhone 和 ipad 等移动设备上, 如果 光标定位在 email 类型的输入框上 ,还会在虚拟键盘的包含 @ 和 .com 按键哦.
本插件,可随意引用.修改.
根据目前主流 邮箱匹配效果 制作. 同时增加了. 自动光标定位. 兼容IE input 修改值后 光标跳到 文档首 的问题. 隐藏当前邮箱后缀,并高亮记忆.
可根据需要修改 后缀邮箱数组. 自定义文字提示. 和 邮箱候选框的位置. bottom left right 3种效果.
默认过滤邮箱自动匹配. 开启不过滤功能, 为自动高亮匹配. 输入 不在候选框 内的 后缀, 为自动添加.在第一项
完整实例下载:https://files.cnblogs.com/noyobo/jquery.emailmatch.rar
完整JS源代码:https://files.cnblogs.com/noyobo/jquery.emailmatch.js
效果图如下:
