jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
更新時(shí)間：2016年08月24日 12:22:20 作者：onestopweb
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法,涉及jQuery表單操作的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法。分享給大家供大家參考，具體如下：
<!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自動(dòng)輸入email、時(shí)間和域名</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、輸入郵箱號(hào)：</p>
<input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/>
<p> </p>
<p>2、輸入時(shí)間：</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="請(qǐng)輸入域名" 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>
運(yùn)行效果圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫效果自動(dòng)伸長(zhǎng)的輸入框?qū)嵗?/a>
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- 基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
- 基于jQuery的輸入框無(wú)值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
- jquery判斷字符輸入個(gè)數(shù)（數(shù)字英文長(zhǎng)度記為1，中文記為2，超過(guò)長(zhǎng)度自動(dòng)截?。?/a>
- jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
相關(guān)文章
這篇文章主要介紹了jQuery中focus事件用法,以實(shí)例形式分析了獲取焦點(diǎn)時(shí)focus事件的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12
jQuery學(xué)習(xí)筆記之jQuery動(dòng)畫效果
本次學(xué)習(xí)分為兩個(gè)文件的測(cè)試，第一個(gè)是基本動(dòng)畫，第二個(gè)是滑動(dòng)和透明動(dòng)畫效果，分別如下2013-09-09
滑動(dòng)向下時(shí)，把最后一個(gè)節(jié)點(diǎn)copy過(guò)去插入在第一節(jié)點(diǎn)中，并在顯示時(shí)隱藏，再通過(guò)透明漸變顯示出來(lái)。附上源碼，需要的朋友可以copy2012-07-07
新版的jquery中，live()方法已經(jīng)被刪除了，所以在調(diào)用的時(shí)候會(huì)提示該函數(shù)不存在，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-02-02
簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)jQuery進(jìn)度條輪播實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
下面小編就為大家?guī)?lái)一篇老生常談combobox和combotree模糊查詢。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
jquery動(dòng)畫效果學(xué)習(xí)筆記（8種效果）
這篇文章分享了一份jquery動(dòng)畫效果學(xué)習(xí)筆記，針對(duì)jquery動(dòng)畫效果進(jìn)行細(xì)致解析，對(duì)淡入淡出效果、滑動(dòng)效果進(jìn)行原理講解，想要學(xué)好jquery動(dòng)畫效果，就耐心閱讀本文，相信大家會(huì)有意想不到的收獲。2015-11-11
jQuery進(jìn)行組件開(kāi)發(fā)完整實(shí)例
這篇文章主要介紹了jQuery進(jìn)行組件開(kāi)發(fā)的方法,以完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)自定義組件的相關(guān)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)的簡(jiǎn)單對(duì)話框拖動(dòng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單對(duì)話框拖動(dòng)功能,涉及jQuery事件響應(yīng)、數(shù)值運(yùn)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06