뉴스레터 가입, 문의 양식, 결제 양식, 사용자 로그인과 같은 실시간 프로젝트 생성을 위해 ' 이메일 ” 필드는 필수입니다. 사용자는 프로세스를 계속하거나 시작하고 자신의 계정에 로그인하려면 이메일을 입력해야 합니다. 이를 위해 사용자는 매번 메일 로그인이나 등록을 제공해야 하므로 사용자 경험이 좋지 않습니다. 이 문제는 JavaScript HTML DOM 자동 완성 속성의 도움으로 해결되었습니다.
이 블로그에서는 JavaScript의 HTML DOM 입력 이메일 자동 완성 속성을 처리하는 절차를 설명합니다.
HTML DOM 입력 이메일 자동 완성 속성을 처리하는 방법은 무엇입니까?
HTML DOM 입력의 자동완성 속성 “ 이메일 ” 요소는 이전에 “에 삽입된 가장 최근 데이터가 포함된 목록을 제공합니다. 이메일 ' 필드. 자동으로 사용 가능한 경우 사용자는 목록에서 자신의 이메일을 선택할 수 있습니다.
통사론
DOM 입력 이메일 자동 완성 속성의 구문은 다음과 같습니다.
emailObj. 자동완성 = '켜기|끄기'
위 구문은 emailObj 요소에 대한 자동 완성 속성을 설정하고 제거합니다.
emailObj. 자동완성
이 구문은 '의 값을 검색합니다. 자동완성 ” 속성을 사용하여 이 속성이 활성화되어 있는지 여부를 확인할 수 있습니다.
자동 완성 속성을 위한 JavaScript 프로그램을 만들어 보겠습니다.
예: 자동 완성 속성 값 활성화, 비활성화 및 검색
이 예에서는 자동 완성 속성이 비활성화됩니다. 이 속성을 '로 설정하면 활성화됩니다. ~에 ' 그리고 ' 끄다 ' 각각. 그런 다음 자동 완성 속성의 현재 값이 검색됩니다.
< 몸 >< 센터 >
< h1 스타일 = '색상: 생도블루;' > 리눅스 < / h1 >
이메일: < 입력 유형 = '이메일' ID = '데모이메일' >
< br >
< br >
< 단추 클릭하면 = '비활성화()' > 무력화 < / 단추 >
< 단추 클릭하면 = '인에이블러()' > 인에이블러 < / 단추 >
< h3 ID = '표적' > < / h3 >
< 단추 클릭하면 = '체커()' > 체커 < / 단추 >
< / 센터 >
< 스크립트 >
기능 비활성화() {
document.getElementById('demoEmail').autocomplete = 'off';
}
함수 활성화() {
document.getElementById('demoEmail').autocomplete = 'on';
}
함수 검사기() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / 스크립트 >
< / 몸 >
위의 코드 블록에 대한 설명은 다음과 같습니다.
- 첫째, “ 입력 ' 요소는 ' 속성 유형으로 생성됩니다. 이메일 '를 입력하여 입력된 데이터가 이메일인지 확인하기 위해 기본 유효성 검사를 수락하고 수행합니다.
- 다음으로 '를 호출하는 세 개의 버튼 요소가 생성됩니다. 비활성화()”, “활성화()” 및 “검사기() ” 기능.
- 이제 “ 무력화 ()” 기능을 선택하여 “ 입력 ” 요소는 해당 ID를 사용하고 “의 값을 할당합니다. 끄다 '그것의' 자동완성 ' 재산.
- “에서 인에이블러 ()” 기능을 사용하면 동일한 “ 자동완성 ” 속성을 사용했지만 이제는 “ ~에 '.
- 그 후에는 “ 체커 ()' 함수에 '만 추가하면 됩니다. 자동완성 '를 입력 요소의 참조 옆에 추가하고 변수 '에 저장합니다. 제이 '.
- 마지막으로 이 변수의 값을 표시합니다. 제이 '를 사용하여 웹페이지 위에 ' 내부 HTML ' 재산.
위의 컴파일 후 출력은 다음과 같습니다.
출력에는 입력 이메일 자동 완성 속성이 비활성화 및 활성화되어 있음이 표시됩니다. 해당 값도 검색되어 웹페이지에 표시됩니다.
결론
HTML DOM 입력 이메일 자동 완성 속성은 사용자가 이전에 이메일 필드에 입력한 값이 포함된 목록을 자동으로 생성합니다. 따라서 사용자는 이전에 입력한 데이터에서 쉽게 선택할 수 있으므로 사용자 경험이 향상됩니다. 이 속성은 ' ~에 '가 할당되고 '의 값이 비활성화되면 비활성화됩니다. 끄다 '가 통과되었습니다. 이 블로그에서는 JavaScript의 DOM 입력 이메일 자동 완성 속성에 대해 설명했습니다.