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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Node.js文件编码格式的转换的方法
Apr 27 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
改进的IP计数器
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
js继承的实现代码
2010/08/05 Javascript
jQuery图片预加载 等比缩放实现代码
2011/10/04 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue程序调试的方法
2019/06/17 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Django日志模块logging的配置详解
2017/02/14 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
详解numpy的argmax的具体使用
2019/05/27 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
刑事附带民事代理词
2015/05/25 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
安全生产培训心得体会
2016/01/18 职场文书
nginx 配置缓存
2022/05/11 Servers
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL