jQuery menyedari kesan penyiapan automatik input_jquery e-mel kotak teks-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

jQuery menyedari kesan penyiapan automatik input_jquery e-mel kotak teks

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

Saya telah melihat kesan pelengkapan automatik e-mel pada kebanyakan tapak web, tetapi kualitinya berbeza Hari ini saya tiba-tiba melihat blog dalam talian, saya rasa pemalam ini sangat bagus, jadi saya ingin menulisnya dan berkongsinya dengan semua orang!

Rendering adalah seperti berikut:

Kod demo lengkap adalah seperti berikut:

<!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>
<title>邮箱地址自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
.demo p {width:1000px; margin-left:auto; margin-right:auto;}
.input{padding:12px; width:300px; border:1px solid #c2c2c2; border-radius:4px; box-shadow:0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color:#F2F2F2; font-size:14px;}
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist li{padding:2px 11px; cursor:pointer;}
.emailist .on, .emailist li:hover{background-color:#eee;}
</style>
</head>
<body>
 <div class="demo">
 <p><input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" required autofocus autocomplete="off"></p>    
 </div>
</body>
</html>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.mailAutoComplete-4.0.js"></script>
<script type="text/javascript">
$(".inputMailList").mailAutoComplete();//使用方法
</script>

Salin selepas log masuk

kod kesan pelaksanaan js (jquery.mailAutoComplete-4.0.js) adalah seperti berikut:

(function($) {
 $.fn.mailAutoComplete = function(options) {
  var defaults = {
   className: "emailist",
   email:  ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
   zIndex: 11 
  };
  // 最终参数
  var params = $.extend({}, defaults, options || {});
  
  // 是否现代浏览器
  var isModern = typeof window.screenX === "number", visibility = "visibility";
  // 键值与关键字
  var key = {
   "up": 38,
   "down": 40,
   "enter": 13,
   "esc": 27,
   "tab": 9 
  };
  // 组装HTML的方法
  var fnEmailList = function(input) {
   var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
   $.each(params.email, function(index, email) {
    if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {   
     arrEmailNew.push(email);      
    }
   }); 
   $.each(arrEmailNew, function(index, email) {
    htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index&#63; ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>'; 
   });  
   return htmlEmailList;   
  };
  // 显示还是隐藏
  var fnEmailVisible = function(ul, isIndexChange) {
   var value = $.trim(this.value), htmlList = '';
   if (value === "" || (htmlList = fnEmailList(this)) === "") {
    ul.css(visibility, "hidden"); 
   } else {
    isIndexChange && (this.indexSelected = -1);
    ul.css(visibility, "visible").html(htmlList);
   }
  };
  
  return $(this).each(function() {
   this.indexSelected = -1;
   // 列表容器创建
   var element = this;
   var eleUl = $('<ul></ul>').css({
    position: "absolute",
    marginTop: element.offsetHeight,
    minWidth: element.offsetWidth - 2,
    visibility: "hidden",
    zIndex: params.zIndex
   }).addClass(params.className).bind("click", function(e) {
    var target = e && e.target;
    if (target && target.tagName.toLowerCase() === "li") {
     $(element).val(target.innerHTML).trigger("input");
     $(this).css(visibility, "hidden");
     element.focus(); // add on 2013-11-20
    }    
   });   
   $(this).before(eleUl);
   // IE6的宽度
   if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } 
   
   // 不同浏览器的不同事件
   isModern&#63; $(this).bind("input", function() {
    fnEmailVisible.call(this, eleUl, true);
   }): element.attachEvent("onpropertychange", function(e) {    
    if (e.propertyName !== "value") return;
    fnEmailVisible.call(element, eleUl, true);  
   });
   
   $(document).bind({
    "click": function(e) {
     var target = e && e.target, htmlList = '';
     if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
      eleUl.css(visibility, "visible").html(htmlList); 
     } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
      eleUl.css(visibility, "hidden");
     }
    },
    "keydown": function(e) {
     var eleLi = eleUl.find("li");
     if (eleUl.css(visibility) === "visible") {
      switch (e.keyCode) {
       case key.up: {
        element.indexSelected--;
        if (element.indexSelected < 0) {
         element.indexSelected = -1 + eleLi.length; 
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.down: {
        element.indexSelected++;
        if (element.indexSelected >= eleLi.length) {
         element.indexSelected = 0; 
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.enter: {  
        e.preventDefault();  
        eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
        eleUl.css("visibility", "hidden");
        break;
       }
       case key.tab: case key.esc: {
        eleUl.css("visibility", "hidden");
        break;
       }
      }
      if (element.indexSelected !== -1) {
       eleUl.html(fnEmailList(element));
      }
     }
    }
   });  
  });
 };
})(jQuery);

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

4 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

4 minggu yang lalu By DDD

Muzium Dua Point: Semua Pameran dan Di Mana Mencari Mereka

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7369

Tutorial Java

1628

Tutorial CakePHP

1355

Tutorial Laravel

1266

Tutorial PHP

1215

Tunjukkan Lagi

Related knowledge

Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

10 helaian cheat mudah alih untuk pembangunan mudah alih Mar 05, 2025 am 12:43 AM

Siaran ini menyusun helaian cheat berguna, panduan rujukan, resipi cepat, dan coretan kod untuk perkembangan aplikasi Android, BlackBerry, dan iPhone. Tiada pemaju harus tanpa mereka! Panduan Rujukan Gesture Touch (PDF) Sumber yang berharga untuk desig

Tingkatkan pengetahuan jQuery anda dengan penonton sumber Mar 05, 2025 am 12:54 AM

JQuery adalah rangka kerja JavaScript yang hebat. Walau bagaimanapun, seperti mana -mana perpustakaan, kadang -kadang perlu untuk mendapatkan di bawah tudung untuk mengetahui apa yang sedang berlaku. Mungkin kerana anda mengesan bug atau hanya ingin tahu tentang bagaimana jQuery mencapai UI tertentu

10 JQuery Fun and Games Plugin Mar 08, 2025 am 12:42 AM

10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

JQuery Parallax Tutorial - Latar Belakang Header Animasi Mar 08, 2025 am 12:39 AM

Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun

See all articles