Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- module
- EJS
- vue
- password
- Frontend
- Cloud
- jquery
- CSS
- github
- DataTable
- Javasript
- url parsing
- insertAdjacentHTML
- Video
- node.js
- React
- html
- innerText
- Express
- QueryString
- node
- json
- Excel
- javascript
- Front-End
- Emulator
- jstree
- ajax
Archives
- Today
- Total
목록password (1)
Developer's blog
[JavaScript] 비밀번호 보이기 / 숨기기 구현
오늘은 새로운 프로젝트의 웹 페이지를 제작하기 시작하며, 새롭게 로그인 폼을 만들고자 하였다. 이번에는 저번에 사용하지 않았던 기능인 비밀번호 보이기/숨기기를 개발하여 사용해보고자 생각하였다. 로그인 개발 시, 비밀번호 input type은 password로 지정하는데 그럼 비밀번호가 ****라고 표시되기 때문에 사용자는 자신이 입력한 값을 알 수 없다. 따라서 눈모양 아이콘을 클릭하면 토글 형식으로 비밀번호가 보였다, 안보였다 하는 기능을 개발하였다. 이때 필요한 코드는 비밀번호 입력 input box 와 눈모양 아이콘은 위한 i 태그를 한 번에 감싸주는 div를 선언하는 html이 필요하며, 아이콘을 input box 내의 적당한 위치에 배치하기 위한 css가 필요하다. 또한, 아이콘을 누르면 act..
FrontEnd/JavaScript
2022. 6. 15. 16:36