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
, 域名
, 时间
, email
自动输入
jquery实现输入框提示、jquery 实现键盘输入、email域名、.email域名注册、jquery email 验证,以便于您获取更多的相关知识。

时间: 2024-10-21 21:32:25

jQuery实现自动输入email、时间和域名的方法_jquery的相关文章

jQuery实现自动调用和触发某个事件的方法_jquery

本文实例讲述了jQuery实现自动调用和触发某个事件的方法.分享给大家供大家参考,具体如下: 我以点击事件为例,研究一下这个话题: jQuery 自动触发点击事件 1.比如我们通过jquery定义了一个点击事件,我们如何自动触发他: $(function(){ $('#button').click(function(){ alert('button is clicking!'); }); }) 1)自动触发点击事件 $('#button').click(); 这大大出乎了 我的意料,我以为这样

jQuery控制文本框只能输入数字和字母及使用方法_jquery

在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成

jQuery实现自动切换播放的经典滑动门效果_jquery

本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!

jquery控制表单输入框显示默认值的方法_jquery

本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)

jquery使整个div区域可以点击的方法_jquery

本文实例讲述了jquery使整个div区域可以点击的方法.分享给大家供大家参考.具体分析如下: 这里实现可以让用户点击整个div区域,这段代码会自动查找div里的链接 $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); Reference HTML: <div class="myBox&quo

jQuery匹配文档链接并添加class的方法_jquery

本文实例讲述了jQuery匹配文档链接并添加class的方法.分享给大家供大家参考.具体如下: 这里使用jQuery自动发现针对文档的链接并添加class,如doc,xls,pdf文档. $('a[href]').each(function() { if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) { $(this).addClass(C[1]); } }); 希望本文所述对大家的jQuery程序设计有所帮助. 以上是小编为您精心

jQuery基于$.ajax设置移动端click超时处理方法_jquery

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法.分享给大家供大家参考,具体如下: 这里介绍jquery click事件如何在移动端自动转换成touchstart事件. 因为移动端click事件会比touchstart事件慢几拍 移动设备某个元素上事件执行顺序是: touchstart touchmove touchend click{mousedown->mousemove->mouseup} click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把c

jQuery xml字符串的解析、读取及查找方法_jquery

本文实例讲述了jQuery xml字符串的解析.读取及查找方法.分享给大家供大家参考,具体如下: xml字符串的解析 <!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/xhtm

jQuery EasyUI中的日期控件DateBox修改方法_jquery

jQuery EasyUI中的日期控件DateBox很好用的,首先需要引入jquery文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DateBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/cs