jQuery实现自动输入email、时间和域名的方法
作者:onestopweb
这篇文章主要介绍了jQuery实现自动输入email、时间和域名的方法,涉及jQuery表单操作的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现自动输入email、时间和域名的方法。分享给大家供大家参考,具体如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery自动输入email、时间和域名</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <link rel="stylesheet" type="text/css" href="completer.css"/> <script src="jquery-1.10.1.min.js"></script> <script src="completer.min.js"></script> <script type="text/javascript"> $(function() { $("#auto-complete-email").completer({ separator: "@", source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"] }); $("#auto-complete-time").completer({ filter: function(val) { val = val.replace(/\D/g, "").substr(0, 2); if (val) { val = parseInt(val, 10) || 0; val = val > 23 ? 23 : val < 10 ? "0" + val : val; } return val; }, separator: ":", source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"] }); var $autoCompleteDomain = $("#auto-complete-domain"), $autoCompleteGo = $("#auto-complete-go"); $autoCompleteDomain.completer({ complete: function() { var url = "http://www." + $autoCompleteDomain.val(); $autoCompleteGo.attr("href", url); }, separator: ".", source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"] }); }); </script> </head> <body> <div class="container"> <div class="demo"> <p>1、输入邮箱号:</p> <input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/> <p> </p> <p>2、输入时间:</p> <input type="text" id="auto-complete-time" class="input"/> <p> </p> <p>3、输入域名:</p> <div class="input-group"> <span class="input-group-addon">www.</span> <input id="auto-complete-domain" class="input" type="text" placeholder="请输入域名" autocomplete="off" /> <span class="input-group-btn"> <a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a> </span> </div> </div> </div> </body> </html>
运行效果图如下:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- 详解jQuery UI库中文本输入自动补全功能的用法
- jQuery实现文本框邮箱输入自动补全效果
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 基于jQuery的输入框无值自动显示指定数据的实现代码
- jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
- jQuery 自动增长的文本输入框实现代码