JS의 사용자 이름을 입력하여 사서함 접미사 목록을 자동으로 표시하는 방법

저자：Eve Cole 업데이트 시간：2025-06-06 10:16:01

이 기사에서는 JS의 사용자 이름을 입력하여 사서함 접미사 목록을 자동으로 표시하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 세부 사항은 다음과 같습니다.

다음은 코드입니다. html 파일에 저장할 수 있습니다.

다음과 같이 코드를 복사하십시오. <! doctype html>

<html>

<헤드>

<title> 사용자 이름을 입력하여 사서함 접미사 목록 </title>을 자동으로 표시합니다

<스타일>

*{마진 : 0; 패딩 : 0;}

ul, li {List 스타일 : 없음;}

.inputelem {너비 : 198px; 높이 : 22px; 선-하이 (line-height : 22px; 테두리 : 1px solid #ff4455;}

.parentcls {너비 : 200px;}

.auto-tip li {너비 : 100%; 높이 : 22px; 선-높이 : 22px; 글꼴 크기 : 14px;}

.Auto-tip li.hoverbg {배경 : #ddd; 커서 : 포인터;}

.red {색상 : 빨간색;}

.hidden {display : none;}

</스타일>

</head>

<body>

<div>

아래에 이메일 사용자 이름을 입력하십시오.

<div>

<입력 유형 = "텍스트">

</div>

</body>

</html>

원칙은 다음과 같습니다. 어떤 단어라도 입력하면 해당 이메일 프롬프트가 자동으로 철회됩니다. 입력 상자에 11을 입력하면 드롭 다운 상자에 11 개의 이메일이 모두 입력됩니다. 다른 이메일을 입력하면 다른 사본에 해당하는 다른 이메일이 있습니다.

마찬가지로이 플러그인에는 HTML 태그가 필요하지 않습니다. 입력 상자 만 해당 클래스 클래스 이름을 가지면 괜찮습니다. 부모는 클래스 클래스 이름을 가지고 있으며 다른 것이 필요하지 않습니다. 내부 HTML 코드가 자동으로 생성됩니다.

HTML 코드는 다음과 같습니다.

다음과 같이 코드를 복사하십시오. <div>

<입력 유형 = "텍스트">

</div>

실제로, 위의 div 태그는 입력 입력 상자에 위와 같이 클래스를 추가 할 필요가 없으며 부모 요소 (사용자 정의가 가능하지만 JS 초기화는 괜찮습니다. 기본적으로 부모 클래스를 ParentCls라고하며 현재 입력 상자 클래스를 입력자라고하며 Hidden Field 클래스를 Hiddencls라고합니다. 페이지에 여러 개의 입력 상자가있을 수 있으므로 입력 상자를 구별하기 위해 부모 클래스가 필요하며 물론 개발 배경에는 숨겨진 도메인 저장 값이 필요합니다.

구성 항목에는 이메일 배열 매개 변수 Mailer가 있습니다. 사서함은 어떤 드롭 다운 상자를 입력하더라도, 특정 항목에 도달 할 때 많은 이메일이 있습니다.

구현 된 기능은 다음과 같습니다.

1. 키보드 위아래 작업을 지원하고 마우스 클릭을 지원하고 Enter를 누릅니다.

2. 문서를 클릭하면 현재 입력 입력 상자를 제외하고 드롭 다운 상자가 숨겨져 있습니다. 입력을 준수하면 자동 일치 및 기타 작업이 구현됩니다.

세부 사항은 말할 것도없이 온라인으로 등록 할 때 자동 이메일 프롬프트 기능과 유사합니다. 버그가 있으면 메시지를 남길 수 있으므로 자세한 내용은 없습니다!

CSS 코드는 다음과 같습니다.

다음과 같이 코드를 복사하십시오. <tyle>