您的位置：首页 > Web前端 > JQuery

jquery插件邮箱后缀自动匹配可自定义

2011-12-19 20:49 621 查看

上次制作了一个失败的邮箱提示插件. 经过失败后,知道错误在了对目标对象的没有搞清楚.以至于重新写了一个.

进过多次测试. 目前的效果算是比较满意的.

唯一不满意的地方是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种效果.

默认过滤邮箱自动匹配. 开启不过滤功能, 为自动高亮匹配. 输入不在候选框内的后缀, 为自动添加.在第一项

完整实例下载:http://files.cnblogs.com/noyobo/jquery.emailmatch.rar

完整JS源代码:http://files.cnblogs.com/noyobo/jquery.emailmatch.js

效果图如下:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery插件 邮箱后缀自动匹配 可自定义

jquery插件邮箱后缀自动匹配可自定义