主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了jQuery实现自动输入email、时间和域名的方法,涉及jQuery表单操作的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现自动输入email、时间和域名的方法。分享给大家供大家参考，具体如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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="pleter.css"/>
<script src="jquery-1.10.1.min.js"></script>
<script src="pleter.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#auto-plete-email").pleter({
    separator: "@",
    source: ["163.", "qq.", "126.", "139.", "gmail.", "hotmail.", "icloud."]
  });
  $("#auto-plete-time").pleter({
    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-plete-domain"), $autoCompleteGo = $("#auto-plete-go");
  $autoCompleteDomain.pleter({
    plete: function() {
      var url = "http://." + $autoCompleteDomain.val();
      $autoCompleteGo.attr("href", url);
    },
    separator: ".",
    source: ["", "", "", "co", "io", "me", "", "."]
  });
});
</script>
</head>
<body>
<div class="container">
  <div class="demo">
    <p>1、输入邮箱号</p>
    <input type="text" id="auto-plete-email" class="input" placeholder="E-mail"/>
    <p>&nbsp;</p>
    <p>2、输入时间</p>
    <input type="text" id="auto-plete-time" class="input"/>
    <p>&nbsp;</p>
    <p>3、输入域名</p>
    <div class="input-group">
      <span class="input-group-addon">.</span>
      <input id="auto-plete-domain" class="input" type="text" placeholder="请输入域名" aulete="off" />
      <span class="input-group-btn">
        <a id="auto-plete-go" class="btn btn-default" href="javascript:void(0);">Go!</a>
      </span>
    </div>
  </div>
</div>
</body>
</html>

运行效果图如下

更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》、《》、《》及《》

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

上一篇：jQuery Raty 一款不错的星级评分插件 下一篇：jQuery实现页面点击后退弹出提示框的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by