JS 프롬프트 텍스트 상자 이메일 주소 완성-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 프롬프트 텍스트 상자 이메일 주소 완성

php中世界最好的语言

Apr 13, 2018 am 09:44 AM

javascript 주소 우편

이번에는 JS 프롬프트 텍스트 상자 이메일 주소 완성에 대한 주의 사항이 무엇인가요? 실제 사례를 살펴보겠습니다.

지금 이루고 싶은 것은 NetEase에 로그인할 때 나타나는 이메일 프롬프트 상자와 비슷한 효과인데, 여기서는 살짝 변경할 예정입니다. 즉, @

를 입력하면 이메일 프롬프트 목록이 나타납니다. 프롬프트 구현의 원칙은 정규 매칭을 사용하는 것입니다

코드는 다음과 같습니다.

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>邮箱补全提示</title>
  <style>
    ul{padding:0px;margin:0px;}
    .login_autoComplete{width:256px;border:1px solid #4190db;position:absolute;background-color:#ffffff;z-index:99;top:109px;left:40px;display:none}
    .login_auto_ul em{font-style:normal}
    .login_auto_ul li.login_auto_title{font-weight:normal;line-height:30px;}
    .login_auto_ul li{line-height:22px;text-indent:5px;font-family:"Arial";cursor:pointer;font-weight:bold;color:#333}
    .login_auto_ul li.hover,.login_auto_ul li.curr{color:#ffffff;background-color:#6eb6fe}
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
    window.email_auto = function(selector){
      var elt = $(selector);
      var strHtml = '<p class="login_autoComplete" id="login_autoComplete">'+
            '    <ul class="login_auto_ul">'+
            '      <li class="login_auto_title">请选择邮箱后缀</li>'+
            '      <li class="hover" hz="@qq.com"></li>'+
            '      <li hz="@163.com"></li>'+
            '      <li hz="@126.com"></li>'+
            '      <li hz="@yahoo.com"></li>'+
            '      <li hz="@sina.com"></li>'+
            '      <li hz="@21cn.com"></li>'+
            '    </ul>'+
            '  </p>';
      var lc = "#login_autoComplete";
      var autoComplete,autoLi;
      if($(lc).length==0){
        $("body").append(strHtml);
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
        autoLi.mouseover(function(){
          $(this).siblings().filter(".hover").removeClass("hover");
          $(this).addClass("hover");
        }).mouseout(function(){
          $(this).removeClass("hover");
        }).mousedown(function(){
          $(lc).data("elt").val($(this).text()).change();
          $(this).parent().parent().hide();
        });
      }else{
        $(lc).data("elt",elt);
        autoComplete = $("#login_autoComplete");
        autoLi = autoComplete.find("li:not(.login_auto_title)");
      }
      $(lc).css("width",elt.outerWidth()-1);
      //用户名补全+翻动
      elt.keyup(function(e){
        if(/13|38|40|116/.test(e.keyCode) || this.value==''){
          return false;
        }
        var username = this.value;
        if(username.indexOf("@")==-1){
          autoComplete.hide();
          return false;
        }
        autoLi.each(function(){
          this.innerHTML = username.replace(/\@+.*/,"")+$(this).attr("hz");
          if(this.innerHTML.indexOf(username)>=0){
            $(this).show();
          }else{
            $(this).hide();
          }
        }).filter(".hover").removeClass("hover");
        autoComplete.show().css({
          left : $(this).offset().left,
          top : $(this).offset().top + $(this).outerHeight(true) - 1
        });
        if(autoLi.filter(":visible").length==0){
          autoComplete.hide();
        }else{
          autoLi.filter(":visible").eq(0).addClass("hover");
        }
      }).change(function(){
        $("#login_autoComplete").hide();
      }).keydown(function(e){
        if(e.keyCode==38){ //上
          autoLi.filter(".hover").prev().not(".login_auto_title").addClass("hover").next().removeClass("hover");
        }else if(e.keyCode==40){ //下
          autoLi.filter(".hover").next().addClass("hover").prev().removeClass("hover");
        }else if(e.keyCode==13){ //Enter
          autoLi.filter(".hover").mousedown();
        }
      }).focus(function(){
        $("#login_autoComplete").data("elt",$(this));
      });
    }
    $(function(){
      email_auto("#xxx");
    });
  </script>
</head>
<body>
脚本之家测试：邮箱补全提示<br/>
<input type="text" id="xxx" style="width:300px"/>
</body>
</html>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7723

자바 튜토리얼

1643

Cakephp 튜토리얼

1396

라라벨 튜토리얼

1290

PHP 튜토리얼

1233

Related knowledge

Redis 메모리 데이터 유형은 무엇입니까? Apr 10, 2025 pm 02:06 PM

Redis는 5 가지 핵심 메모리 데이터 유형을 제공합니다 : 문자열 : 기본 문자열 저장, 증분/감소 작업을 지원합니다. 목록 : 양방향 링크리스트, 효율적인 인스션/삭제 작업. 세트 : 중복 제거 작업에 사용되는 순차 대표 세트. 해시 : 구조화 된 데이터를 저장하는 데 적합한 키-값 쌍 스토리지. ZSET : 순서 세트, 각 요소에는 분수가 있으며 분수별로 정렬 할 수 있습니다. 올바른 데이터 유형을 선택하는 것은 성능을 최적화하는 데 중요합니다.

다른 데이터베이스 시스템에서 열을 추가하는 구문이 동일합니까? Apr 09, 2025 pm 12:51 PM

다른 데이터베이스 시스템에서 열을 추가하기위한 구문은 크게 다르며 데이터베이스마다 다릅니다. 예를 들어 : MySQL : Alter Table 사용자는 열 이메일 Varchar (255)를 추가합니다. Postgresql : Alter Table 사용자는 열을 추가하여 varchar (255)가 널 고유하지 않음; Oracle : Alter Table 사용자 이메일 추가 Varchar2 (255); SQL Server : Alter Table 사용자는 이메일 VARCH 추가

작곡가로 이메일 마케팅을 단순화하는 방법 : duwa.io의 응용 프로그램 관행 Apr 18, 2025 am 11:27 AM

메일 마케팅 캠페인을 할 때 까다로운 문제가 있습니다. HTML 형식으로 효율적으로 메일을 작성하고 보내는 방법. 기존의 접근 방식은 수동으로 코드를 작성하고 SMTP 서버를 사용하여 이메일을 보내는 것이지만 이는 시간이 많이 걸릴뿐만 아니라 오류가 발생하기 쉽습니다. 여러 솔루션을 시도한 후 HTML 메일을 신속하게 만들고 보내는 데 도움이되는 간단하고 사용하기 쉬운 RESTAPI 인 Duwa.io를 발견했습니다. 개발 프로세스를 더욱 단순화하기 위해 작곡가를 사용하여 duwa.io의 PHP 라이브러리 인 CaptainDoe/Duwa를 설치하고 관리하기로 결정했습니다.

데비안 메일 서버를 모니터링하는 방법 Apr 12, 2025 pm 10:06 PM

데비안 메일 서버가 안정적으로 실행되도록 효과적인 모니터링 메커니즘이 필요합니다. 이 기사에서는 로그 점검, 모니터링 도구 및 경보 시스템 설정을 포함한 몇 가지 모니터링 방법을 소개합니다. 1. 로그 로그 Debian Mail 서버의 로그 파일 모니터링은 일반적으로 /var/log/mail.log와 같은/var/log/directory에 있습니다. 이러한 로그를 정기적으로 확인하면 잠재적 인 문제를 적시에 식별하는 데 도움이 될 수 있습니다. 2. 모니터링 도구 및 스크립트 예제 다음은 CPU, 메모리 및 디스크 공간 사용 모니터링 및 전자 메일 알람 전송을위한 몇 가지 Bash 스크립트 예제를 제공합니다.

Nginx 가상 호스트 구성 기술은 여러 웹 사이트를 효율적으로 관리합니다 Apr 13, 2025 pm 10:03 PM

Nginx 가상 호스트 구성 : 서버 정원 주변에서 재생하는 한 서버가 어떻게 여러 웹 사이트를 동시에 제공하는지 생각해 본 적이 있습니까? 답은 Nginx 가상 호스트 구성입니다. 이 기사에서는 Nginx Virtual Host 구성 팁으로 안내하여 "서버 가든"을 효율적으로 관리하고 일반적인 함정을 피할 수 있습니다. 읽은 후에는 가상 호스트를 쉽게 구성하고 그 뒤에있는 메커니즘을 이해하고 효율적이고 안정적인 nginx 구성 파일을 작성할 수 있습니다. 기본 준비 : 도구 상자를 시작하기 전에 NGINX가 설치되어 있는지 확인하고 기본 Linux 명령 및 구성 파일 구조를 이해해야한다는 것을 잊지 마십시오. 이 단계를 완료했다고 가정하면 Nginx를 여기에 설치하는 방법을 설명하지 않습니다. 기억하다

새로운 사용자 등록 안내서 2025 Apr 21, 2025 pm 10:09 PM

2025 년 Bitget에 등록하는 단계에는 다음이 포함됩니다. 1. 유효한 이메일 또는 휴대폰 번호 및 안정적인 네트워크를 준비합니다. 2. Bitget 공식 웹 사이트를 방문하십시오. 3. 등록 페이지를 입력하십시오. 4. 등록 방법을 선택하십시오. 5. 등록 정보를 작성하십시오. 6. 사용자 계약에 동의합니다. 7. 완전한 검증; 8. 검증 코드를 얻고 입력하십시오. 9. 완전한 등록. 등록 후 계정에 로그인하고 KYC IDETITION VERIFICE를 수행하며 계정의 보안을 보장하기 위해 보안 조치를 설정하는 것이 좋습니다.

상위 10 개 디지털 가상 통화 앱 순위 : 통화 서클 트레이딩의 상위 10 개 디지털 환전 교환 Apr 22, 2025 pm 03:00 PM

상위 10 개 디지털 가상 통화 앱은 다음과 같습니다. 1. OKX, 2. BINANCE, 3. GATE.IO, 4. COINBASE, 5. KRAKEN, 6. HUOBI, 7. KUCOIN, 8. BITFINEX, 9. BITSTAMP, 10. POLONIEX. 이러한 거래소는 거래량, 사용자 경험 및 보안과 같은 요소를 기반으로 선택되며 모두 다양한 디지털 통화 거래 서비스 및 효율적인 거래 경험을 제공합니다.

PHP 이메일 관리 문제를 해결하는 방법은 무엇입니까? PHP-IMAP/PHP-IMAP 라이브러리를 사용하여 쉽게 수행 할 수 있습니다! Apr 17, 2025 pm 09:33 PM

우편함을 효율적으로 관리하고 메일을 얻고 삭제하는 방법 : 메일을 처리 해야하는 프로젝트를 개발할 때 어려운 문제가 발생했습니다. 여러 방법을 시도한 후 PHP-IMAP/PHP-IMAP 라이브러리가 내 문제를 해결할뿐만 아니라 프로그램의 효율성과 안정성을 크게 향상 시킨다는 것을 알았습니다.

See all articles

JS 프롬프트 텍스트 상자 이메일 주소 완성

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제