jQuery实现自动输入email、时间和域名的方法


Posted in Javascript onAugust 24, 2016

本文实例讲述了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实现自动输入email、时间和域名的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
一个对于Array的简单扩展
Oct 03 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 #Javascript
深入浅析JavaScript中的3DES
Aug 24 #Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 #Javascript
JavaScript lodash常见用法系列小结
Aug 24 #Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 #Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 #Javascript
You might like
php fckeditor 调用的函数
2009/06/21 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP中常用的转义函数
2014/02/28 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
面包屑导航详解
2017/12/07 Javascript
node内置调试方法总结
2018/02/22 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
原生js实现日历效果
2020/03/02 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
四年级评语大全
2014/04/21 职场文书
撤诉状格式范本
2015/05/19 职场文书
党纪处分决定书
2015/06/24 职场文书