Trong khi tạo biểu mẫu hoặc bảng câu hỏi, có thể có yêu cầu phân bổ giá trị đầu vào của người dùng cho một trường cụ thể. Chẳng hạn, nối thêm các mục bí mật, tức là mật khẩu hoặc giá trị được mã hóa để sử dụng chúng. Trong những trường hợp như vậy, việc đặt giá trị của phần tử đầu vào ẩn thông qua JavaScript sẽ hỗ trợ giữ dữ liệu an toàn và bảo mật.
Blog này sẽ thảo luận về quy trình đặt giá trị của trường nhập ẩn thông qua JavaScript
Làm cách nào để đặt giá trị của trường nhập ẩn thông qua JavaScript?
Để đặt giá trị của trường nhập ẩn thông qua JavaScript, hãy áp dụng các phương pháp được nêu dưới đây:
Phương pháp 1: Đặt giá trị của phần tử ẩn thông qua thuộc tính InternalHTML
Các ' bên trongHTML ” thuộc tính trả về nội dung HTML của phần tử. Thuộc tính này có thể được sử dụng để đặt và nối thêm giá trị do người dùng xác định vào trường nhập ẩn được phân bổ.
Cú pháp:
phần tử.innerHTML = văn bản
Trong cú pháp trên, “ yếu tố ” đề cập đến phần tử cần được thêm vào với “ chữ ' giá trị.
Thí dụ
Hãy xem qua ví dụ được nêu dưới đây:
< đầu vào loại = 'ẩn giấu' Tôi = 'phần tử ẩn' giá trị = '' >< script >
cho phép myInput = lời nhắc ( 'Vui lòng nhập văn bản của bạn' , '' ) ;
nếu ( đầu vào của tôi ! = không ) {
cho phép x = document.getElementById ( 'phần tử ẩn' ) .innerHTML = 'Giá trị của phần tử ẩn là:' + đầu vào của tôi;
báo động ( x )
}
script >
Trong khối mã trên:
- Đầu tiên, tạo trường đầu vào có các thuộc tính đã nêu.
- Các ' loại ” thuộc tính có giá trị “ ẩn giấu ” biểu thị rằng đó là một trường ẩn.
- Sau đó, “ lời nhắc ” hộp thoại nhận một giá trị từ người dùng.
- Bây giờ, hãy kiểm tra giá trị do người dùng xác định sao cho nó không phải là “ vô giá trị ' sử dụng ' nếu ' điều kiện.
- Cuối cùng, truy cập trường nhập ẩn bằng “ Tôi ' sử dụng ' getElementById() ” và đặt giá trị do người dùng xác định cho nó thông qua “ bên trongHTML ' tài sản.
- Cuối cùng, hiển thị giá trị được nối thông qua một cảnh báo.
đầu ra
Theo quan sát, giá trị đầu vào của người dùng được thêm vào trường đầu vào ẩn.
Phương pháp 2: Đặt giá trị của phần tử ẩn bằng phương pháp jQuery
Theo cách tiếp cận này, jQuery của “ giá trị() ” sẽ được sử dụng để phân bổ giá trị của trường văn bản đầu vào hiển thị cho trường đầu vào ẩn.
Thí dụ
Hãy xem tổng quan đoạn mã sau:
< P > Nhập giá trị vì yếu tố ẩn P >< đầu vào Tôi = 'đầu vào của tôi' giá trị = '' loại = 'chữ' />< anh >
< đầu vào Tôi = 'phần tử ẩn' loại = 'ẩn giấu' giá trị = '' />
< anh >
< cái nút Tôi = 'btnShow' > Gửi đi cái nút >
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > script >
< script >
$ ( '#btnShow' ) .trên ( 'nhấp chuột' , hàm số ( ) {
cho phép giá trị đầu vào = $ ( '#đầu vào của tôi' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( giá trị đầu vào ) ;
báo động ( 'Giá trị của phần tử ẩn là:' + giá trị đầu vào ) ;
} ) ;
script >
Trong các dòng mã trên:
- Đầu tiên, bao gồm một trường văn bản đầu vào có các thuộc tính đã nêu.
- Tương tự như vậy, phân bổ một trường nhập liệu ẩn khác, hiển nhiên từ “ loại ' thuộc tính.
- Đã thêm thẻ
- Sau đó, bao gồm thư viện jQuery với sự trợ giúp của “ src ” thuộc tính trong “
' nhãn. - Trong mã JS, truy cập nút đã tạo và liên kết “ trên() ” với nó để thực hiện chức năng trên nút bấm.
- Trong phần định nghĩa hàm, hãy truy cập đầu vào hiển thị “ chữ ” trường và lấy giá trị của nó bằng cách sử dụng “ giá trị() ' phương pháp.
- Trong bước tiếp theo, giá trị được tìm nạp sẽ được phân bổ cho đầu vào ẩn “ chữ ” trường thông qua “ giá trị() ' phương pháp.
- Cuối cùng, hiển thị giá trị kết quả được phân bổ cho “ trường nhập ẩn ” thông qua một cảnh báo.
đầu ra
Trong đầu ra ở trên, có thể thấy rằng giá trị của đầu vào có thể nhìn thấy “ chữ ” trường được phân bổ cho “ ẩn giấu ” trường đầu vào.
Phần kết luận
Để đặt giá trị của trường nhập ẩn thông qua JavaScript, hãy áp dụng “ bên trongHTML ” thuộc tính hoặc jQuery “ giá trị() ' phương pháp. Thuộc tính innerHTML có thể được sử dụng để áp dụng chức năng mong muốn bằng cách nối thêm giá trị do người dùng xác định. Phương thức val() có thể được áp dụng để phân bổ giá trị của trường văn bản nhập liệu hiển thị cho trường nhập liệu ẩn Blog này đã thảo luận về quy trình đặt giá trị của trường nhập liệu ẩn thông qua JavaScript.