Để tạo các dự án thời gian thực như đăng ký bản tin, biểu mẫu liên hệ, biểu mẫu thanh toán và thông tin đăng nhập của người dùng, “ e-mail ' lĩnh vực được yêu cầu. Người dùng phải nhập email của mình để tiếp tục hoặc bắt đầu quá trình và cũng để đăng nhập vào tài khoản của mình. Vì mục đích này, người dùng phải cung cấp thông tin đăng nhập hoặc đăng ký qua thư mỗi lần, điều này gây ra trải nghiệm không tốt cho người dùng. Vấn đề này được giải quyết với sự trợ giúp của thuộc tính tự động hoàn thành DOM HTML của JavaScript.
Blog này giải thích quy trình xử lý thuộc tính tự động hoàn thành email đầu vào HTML DOM của JavaScript.
Làm cách nào để xử lý thuộc tính tự động hoàn thành email đầu vào DOM HTML?
Thuộc tính tự động hoàn thành của đầu vào HTML DOM “ e-mail Phần tử ” cung cấp danh sách chứa dữ liệu gần đây nhất được chèn trước đó vào phần “ e-mail ' cánh đồng. Nó cho phép người dùng chọn email của mình từ danh sách nếu nó có sẵn tự động.
Cú pháp
Cú pháp cho thuộc tính tự động hoàn thành email đầu vào DOM được nêu dưới đây:
emailObj. tự động hoàn thành = 'bật|tắt'
Cú pháp trên đặt và xóa thuộc tính tự động hoàn thành trên phần tử emailObj.
emailObj. tự động hoàn thành
Cú pháp này lấy giá trị của “ tự động hoàn thành ” để tìm xem thuộc tính này có được bật hay không.
Hãy có một chương trình JavaScript cho thuộc tính tự động hoàn thành
Ví dụ: Kích hoạt, vô hiệu hóa và truy xuất giá trị của thuộc tính tự động hoàn thành
Trong ví dụ này, thuộc tính tự động hoàn thành sẽ bị tắt, được bật bằng cách đặt thuộc tính này thành “ TRÊN ' Và ' tắt ' tương ứng. Sau đó, giá trị hiện tại của thuộc tính tự động hoàn thành sẽ được truy xuất:
< thân hình >< trung tâm >
< h1 phong cách = 'màu: xanh thiếu sinh quân;' > Linux < / h1 >
E-mail: < đầu vào kiểu = 'e-mail' nhận dạng = 'email demo' >
< anh >
< anh >
< cái nút trong một cái nhấp chuột = 'Trình vô hiệu hóa()' > Trình vô hiệu hóa < / cái nút >
< cái nút trong một cái nhấp chuột = 'Người kích hoạt()' > Người kích hoạt < / cái nút >
< h3 nhận dạng = 'mục tiêu' > < / h3 >
< cái nút trong một cái nhấp chuột = 'Người kiểm tra()' > Người kiểm tra < / cái nút >
< / trung tâm >
< kịch bản >
chức năng vô hiệu hóa() {
document.getElementById('demoEmail').autocomplete = 'tắt';
}
Trình kích hoạt hàm() {
document.getElementById('demoEmail').autocomplete = 'bật';
}
Trình kiểm tra hàm() {
var j = document.getElementById('demoEmail').autocomplete;
document.getElementById('target').innerHTML = j;
}
< / kịch bản >
< / thân hình >
Giải thích về khối mã trên được nêu dưới đây:
- Đầu tiên ' đầu vào ” phần tử được tạo với một loại thuộc tính “ e-mail ” để chấp nhận và thực hiện xác thực cơ bản nhằm đảm bảo dữ liệu đã nhập là email.
- Tiếp theo, ba phần tử nút được tạo có tên là “ Trình giải mã()”, “Trình kích hoạt()” và “Trình kiểm tra() ' chức năng.
- Bây giờ, hãy xác định “ Trình vô hiệu hóa ()” bằng cách chọn “ đầu vào Phần tử ” sử dụng id của nó và gán giá trị “ tắt ' cho mình ' tự động hoàn thành ' tài sản.
- Bên trong ' Người kích hoạt ()”, áp dụng tương tự “ tự động hoàn thành ” thuộc tính nhưng bây giờ gán cho nó một giá trị là “ TRÊN ”.
- Sau đó, xác định “ Người kiểm tra ()” bằng cách chỉ thêm “ tự động hoàn thành ” bên cạnh tham chiếu của phần tử đầu vào và lưu nó vào biến “ j ”.
- Cuối cùng hiển thị giá trị của biến này “ j ” trên trang web bằng cách sử dụng “ bên trongHTML ' tài sản.
Đầu ra sau khi biên dịch ở trên được hiển thị như sau:
Đầu ra cho thấy thuộc tính tự động hoàn thành email đầu vào đang bị tắt và bật. Giá trị của nó cũng được lấy ra và hiển thị trên trang web.
Phần kết luận
Thuộc tính tự động hoàn thành email đầu vào HTML DOM, tự động tạo danh sách chứa các giá trị mà người dùng đã nhập trước đó vào trường email. Vì vậy, người dùng có thể dễ dàng chọn từ dữ liệu đã nhập trước đó của họ và do đó, nâng cao trải nghiệm người dùng. Thuộc tính này được thiết lập khi giá trị của “ TRÊN ” được gán cho nó và bị vô hiệu hóa khi giá trị của “ tắt ' được thông qua. Blog này đã giải thích thuộc tính tự động hoàn thành email đầu vào DOM bằng JavaScript.