基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
更新時(shí)間:2012年06月14日 12:49:20 作者:
基于jQuery的input輸入框下拉提示層,方便用戶(hù)輸入郵箱時(shí)的提示信息,需要的朋友可以參考下
效果圖

代碼部分
// JavaScript Document
(function($){
$.fn.extend({
"changeTips":function(value){
value = $.extend({
divTip:""
},value)
var $this = $(this);
var indexLi = 0;
//點(diǎn)擊document隱藏下拉層
$(document).click(function(event){
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
var liVal = $(event.target).text();
$this.val(liVal);
blus();
}else{
blus();
}
})
//隱藏下拉層
function blus(){
$(value.divTip).hide();
}
//鍵盤(pán)上下執(zhí)行的函數(shù)
function keychang(up){
if(up == "up"){
if(indexLi == 1){
indexLi = $(value.divTip).children().length-1;
}else{
indexLi--;
}
}else{
if(indexLi == $(value.divTip).children().length-1){
indexLi = 1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
}
//值發(fā)生改變時(shí)
function valChange(){
var tex = $this.val();//輸入框的值
var fronts = "";//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正則字面量方法,是不能用變量的。所以這里用的是new方式。
//讓提示層顯示,并對(duì)里面的LI遍歷
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index) {
var valAttr = $(this).attr("email");
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
//索引值大于1的LI元素進(jìn)處處理
if(index>1){
//當(dāng)輸入的值有“@”的時(shí)候
if(af.test(tex)){
//如果含有“@”就截取輸入框這個(gè)符號(hào)之前的字符串
fronts = tex.substring(tex.indexOf("@"),0);
$(this).text(fronts+valAttr);
//判斷輸入的值“@”之后的值,是否含有和LI的email屬性
if(regMail.test($(this).attr("email"))){
$(this).show();
}else{
if(index>1){
$(this).hide();
}
}
}
//當(dāng)輸入的值沒(méi)有“@”的時(shí)候
else{
$(this).text(tex+valAttr);
}
}
})
}
}
//輸入框值發(fā)生改變的時(shí)候執(zhí)行函數(shù),這里的事件用判斷處理瀏覽器兼容性;
if($.browser.msie){
$(this).bind("propertychange",function(){
valChange();
})
}else{
$(this).bind("input",function(){
valChange();
})
}
//鼠標(biāo)點(diǎn)擊和懸停LI
$(value.divTip).children().
hover(function(){
indexLi = $(this).index();//獲取當(dāng)前鼠標(biāo)懸停時(shí)的LI索引值;
if($(this).index()!=0){
$(this).addClass("active").siblings().removeClass();
}
})
//按鍵盤(pán)的上下移動(dòng)LI的背景色
$this.keydown(function(event){
if(event.which == 38){//向上
keychang("up")
}else if(event.which == 40){//向下
keychang()
}else if(event.which == 13){ //回車(chē)
var liVal = $(value.divTip).children().eq(indexLi).text();
$this.val(liVal);
blus();
}
})
}
})
})(jQuery)
一、功能分析:
1.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層;
2.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層,會(huì)根據(jù)輸入的內(nèi)容自動(dòng)往“@”前面添加;
3.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層,會(huì)根據(jù)輸入的內(nèi)容對(duì)下拉層“@”后面的內(nèi)容進(jìn)行篩選;
4.點(diǎn)擊下拉層里面的提示內(nèi)容,會(huì)將其值,填充到輸入框;
5.按下鼠標(biāo)回車(chē)鍵會(huì)將其選中的下拉層里的內(nèi)容,填充到輸入框;
6.按鍵盤(pán)的“向上”或“向下”的方向鍵,可以在下拉層的選項(xiàng)中移動(dòng)(循環(huán)移動(dòng),改變當(dāng)前LI的背景色);
7.鼠標(biāo)懸停在下拉層的LI上面時(shí),會(huì)有一個(gè)背景色。
二、功能實(shí)現(xiàn):
1.input輸入框的值,發(fā)生變化時(shí)的事件是:propertychange(IE)或input(標(biāo)準(zhǔn));
2.在發(fā)生propertychange事件的時(shí)候,取其輸入框的值,再取其“@”前面的值,并賦值給下拉層里面的LI加上LI的email屬性值;
3.在發(fā)生propertychange事件的時(shí)候,
3.1取其輸入框的值,再取其“@”后面的值,
3.2并將這個(gè)值與下拉層里面的LI的email屬性值進(jìn)行正則匹配;
這里要注意,正則字面量方法,是不能用變量的。所以這里用的是new方式。
這里的正則是取的輸入框“@”后面的值,所以正則,是變化的。而LI的EMAIL屬性值是不變的
4.這里用了一個(gè)事件委托方式,將點(diǎn)擊事件綁定給document,然后通過(guò)判斷,點(diǎn)擊時(shí)最初觸發(fā)的DOM元素,是什么。來(lái)決定,
4.1否隱藏下拉提示層?
4.2還是需要將下拉層,選中的值,賦給輸入框
(這里不能直接使用,當(dāng)輸入框失去焦點(diǎn)時(shí),隱藏下拉提示層,因?yàn)闀?huì)與點(diǎn)擊下拉層,將其值填入輸入框,這個(gè)功能有邏輯上的矛盾;)
5.和上面第4條差不多;
6.就是要注意,在鼠標(biāo)懸停時(shí),把當(dāng)前的LI索引存入一個(gè)全局變量當(dāng)中,這樣就可以告訴“向上”或“向下”按鍵時(shí),的起始位置了;
7.遍歷LI,給它們的懸停事件都綁定一個(gè)改變其當(dāng)前背景色的處理函數(shù);
感謝“妙味課堂”提供的視頻
在線演示 http://demo.jb51.net/js/2012/myinputMail/
打包下載 myinputMail_jb51.rar

代碼部分
復(fù)制代碼 代碼如下:
// JavaScript Document
(function($){
$.fn.extend({
"changeTips":function(value){
value = $.extend({
divTip:""
},value)
var $this = $(this);
var indexLi = 0;
//點(diǎn)擊document隱藏下拉層
$(document).click(function(event){
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){
var liVal = $(event.target).text();
$this.val(liVal);
blus();
}else{
blus();
}
})
//隱藏下拉層
function blus(){
$(value.divTip).hide();
}
//鍵盤(pán)上下執(zhí)行的函數(shù)
function keychang(up){
if(up == "up"){
if(indexLi == 1){
indexLi = $(value.divTip).children().length-1;
}else{
indexLi--;
}
}else{
if(indexLi == $(value.divTip).children().length-1){
indexLi = 1;
}else{
indexLi++;
}
}
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass();
}
//值發(fā)生改變時(shí)
function valChange(){
var tex = $this.val();//輸入框的值
var fronts = "";//存放含有“@”之前的字符串
var af = /@/;
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正則字面量方法,是不能用變量的。所以這里用的是new方式。
//讓提示層顯示,并對(duì)里面的LI遍歷
if($this.val()==""){
blus();
}else{
$(value.divTip).
show().
children().
each(function(index) {
var valAttr = $(this).attr("email");
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();}
//索引值大于1的LI元素進(jìn)處處理
if(index>1){
//當(dāng)輸入的值有“@”的時(shí)候
if(af.test(tex)){
//如果含有“@”就截取輸入框這個(gè)符號(hào)之前的字符串
fronts = tex.substring(tex.indexOf("@"),0);
$(this).text(fronts+valAttr);
//判斷輸入的值“@”之后的值,是否含有和LI的email屬性
if(regMail.test($(this).attr("email"))){
$(this).show();
}else{
if(index>1){
$(this).hide();
}
}
}
//當(dāng)輸入的值沒(méi)有“@”的時(shí)候
else{
$(this).text(tex+valAttr);
}
}
})
}
}
//輸入框值發(fā)生改變的時(shí)候執(zhí)行函數(shù),這里的事件用判斷處理瀏覽器兼容性;
if($.browser.msie){
$(this).bind("propertychange",function(){
valChange();
})
}else{
$(this).bind("input",function(){
valChange();
})
}
//鼠標(biāo)點(diǎn)擊和懸停LI
$(value.divTip).children().
hover(function(){
indexLi = $(this).index();//獲取當(dāng)前鼠標(biāo)懸停時(shí)的LI索引值;
if($(this).index()!=0){
$(this).addClass("active").siblings().removeClass();
}
})
//按鍵盤(pán)的上下移動(dòng)LI的背景色
$this.keydown(function(event){
if(event.which == 38){//向上
keychang("up")
}else if(event.which == 40){//向下
keychang()
}else if(event.which == 13){ //回車(chē)
var liVal = $(value.divTip).children().eq(indexLi).text();
$this.val(liVal);
blus();
}
})
}
})
})(jQuery)
一、功能分析:
1.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層;
2.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層,會(huì)根據(jù)輸入的內(nèi)容自動(dòng)往“@”前面添加;
3.input輸入框的值,發(fā)生變化時(shí),顯示提示的下拉層,會(huì)根據(jù)輸入的內(nèi)容對(duì)下拉層“@”后面的內(nèi)容進(jìn)行篩選;
4.點(diǎn)擊下拉層里面的提示內(nèi)容,會(huì)將其值,填充到輸入框;
5.按下鼠標(biāo)回車(chē)鍵會(huì)將其選中的下拉層里的內(nèi)容,填充到輸入框;
6.按鍵盤(pán)的“向上”或“向下”的方向鍵,可以在下拉層的選項(xiàng)中移動(dòng)(循環(huán)移動(dòng),改變當(dāng)前LI的背景色);
7.鼠標(biāo)懸停在下拉層的LI上面時(shí),會(huì)有一個(gè)背景色。
二、功能實(shí)現(xiàn):
1.input輸入框的值,發(fā)生變化時(shí)的事件是:propertychange(IE)或input(標(biāo)準(zhǔn));
2.在發(fā)生propertychange事件的時(shí)候,取其輸入框的值,再取其“@”前面的值,并賦值給下拉層里面的LI加上LI的email屬性值;
3.在發(fā)生propertychange事件的時(shí)候,
3.1取其輸入框的值,再取其“@”后面的值,
3.2并將這個(gè)值與下拉層里面的LI的email屬性值進(jìn)行正則匹配;
這里要注意,正則字面量方法,是不能用變量的。所以這里用的是new方式。
這里的正則是取的輸入框“@”后面的值,所以正則,是變化的。而LI的EMAIL屬性值是不變的
4.這里用了一個(gè)事件委托方式,將點(diǎn)擊事件綁定給document,然后通過(guò)判斷,點(diǎn)擊時(shí)最初觸發(fā)的DOM元素,是什么。來(lái)決定,
4.1否隱藏下拉提示層?
4.2還是需要將下拉層,選中的值,賦給輸入框
(這里不能直接使用,當(dāng)輸入框失去焦點(diǎn)時(shí),隱藏下拉提示層,因?yàn)闀?huì)與點(diǎn)擊下拉層,將其值填入輸入框,這個(gè)功能有邏輯上的矛盾;)
5.和上面第4條差不多;
6.就是要注意,在鼠標(biāo)懸停時(shí),把當(dāng)前的LI索引存入一個(gè)全局變量當(dāng)中,這樣就可以告訴“向上”或“向下”按鍵時(shí),的起始位置了;
7.遍歷LI,給它們的懸停事件都綁定一個(gè)改變其當(dāng)前背景色的處理函數(shù);
感謝“妙味課堂”提供的視頻
在線演示 http://demo.jb51.net/js/2012/myinputMail/
打包下載 myinputMail_jb51.rar
您可能感興趣的文章:
- jQuery/JS監(jiān)聽(tīng)input輸入框值變化實(shí)例
- jQuery實(shí)現(xiàn)input輸入框獲取焦點(diǎn)與失去焦點(diǎn)時(shí)提示的消失與顯示功能示例
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
- 基于Bootstrap使用jQuery實(shí)現(xiàn)輸入框組input-group的添加與刪除
- js與jquery實(shí)時(shí)監(jiān)聽(tīng)輸入框值的oninput與onpropertychange方法
- jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
- input 和 textarea 輸入框最大文字限制的jquery插件
- jQuery 版本的文本輸入框檢查器Input Check
- jquery獲取input輸入框中的值
相關(guān)文章
Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇Jquery修改image的src屬性,圖片不加載問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果代碼
Jquery實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果代碼,需要的朋友可以參考下2012-03-03
jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
這篇文章主要介紹了jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)簡(jiǎn)單示例,使用ajax加載,同時(shí)介紹了(document).height()與$(window).height()的區(qū)別,需要的朋友可以參考下2014-04-04
jquery插件如何使用 jQuery操作Cookie插件使用介紹
本文將介紹jQuery如何操作Cookie插件,需要了解的朋友可以參考下2012-12-12
jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對(duì)象
本節(jié)主要介紹了使用jQuery.parseJSON(json)將JSON字符串轉(zhuǎn)換成js對(duì)象,需要的朋友可以參考下2014-07-07
JQuery Easyui Tree的oncheck事件實(shí)現(xiàn)代碼
最近項(xiàng)目中有用到Easyui Tree,我想要checkbox的選中事件,但是api只提供了一個(gè)onClick事件,我百度、google之后,額,還是看js吧2010-05-05
jquery如何判斷表格同一列不同行input數(shù)據(jù)是否重復(fù)
這篇文章主要介紹了jquery如何判斷表格同一列不同行input數(shù)據(jù)是否重復(fù),需要的朋友可以參考下2014-05-05

