input

[JS] 검색어 자동완성 기능

위와 같은 자동완성 기능은 우리가 흔히 접할 수 있는 UI 요소입니다. ※ 초성검색 적용 버전 코드도 있습니다. 예제 코드 See the Pen JS Autocomplete by hyukson (@hyukson) on CodePen. HTML 태그 사용하기 HTML에는 Input 자동완성 기능을 이용할 수 있도록 해주는, datalist 태그와 list 속성이 존재합니다. 하지만, 다양한 이벤트 설정이 어렵고 커스텀이 힘들다는 단점을 보완하기 위해서 자바스크립트로 구현해 보았습니다. 코드 풀이 먼저 검색어를 입력받을 Input 요소와 자동완성을 시켜줄 리스트 요소를 하나 생성해 줍니다. /* active 클래스를 가진 요소에 대해 */ .autocomplete > div.active { backgroun..

[JS] Textarea 높이 자동 조절

예제 코드 See the Pen Textarea Auto Height by hyukson (@hyukson) on CodePen. 코드 높이를 조절할 textarea 요소를 준비해줍니다. textarea { width: 240px; height: 30px; } textarea의 기본 Height를 지정해주고, 이 크기는 JavaScript 코드에서도 사용하게 됩니다. const DEFAULT_HEIGHT = 30; // textarea 기본 height const $textarea = document.querySelector('#textarea'); CSS에서 지정한 Height를 'DEFAULT_HEIGHT' 변수에 저장시켜줍니다. document.querySelector() 선택자로 textarea ..

[CSS] checkbox, radio, range 색상 바꾸기

기존의 CSS로 체크박스, 라디오 등의 색상을 바꾸기 위해서는 appearance 속성을 사용하여 네이티브로 지원되는 모양들을 해제한 후 색상을 입혀야 했습니다. 기존에는 appearance 속성으로 인해서 체크박스, 라디오 같은 상호작용 요소도 사라져 버려, 번거로운 추가 작업이 필요했습니다. 이번에 accent-color 속성이 CSS에 추가됨으로 input의 체크박스(checkbox), 라디오(radio), 레인지(range), 프로그레스(progress) 타입에 손쉬운 색상 변경이 가능해졌습니다. 코드 input, progress { accent-color: red; } appearance 같은 속성을 사용하지 않고, 단순히 accent-color 속성을 사용하여 색을 지정해 주면 됩니다. 그럴 ..

[JS] 체크박스 전체 선택 , 해제

코드 See the Pen Untitled by 장혁수 (@hyukson) on CodePen. 코드 풀이 전체 선택, 해제 기능을 추가할 input에 change 이벤트를 걸어 해당 element를 받아옵니다. target으로 받아온 input element의 체크상태를 checked로 접근이 가능합니다. 리스트에 있는 input들을 모두 해당 checked 속성 값과 같게 만들어 주면 됩니다.

[JS] 전화번호 자동 하이픈(-) 정규식

첫 번째 코드 const phone = '01012345678'; phone.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // '010-1234-5678' 00-000-0000 또는 000-0000-0000 전화번호를 (2, 3) - (3, 4) - (4) 자리에 숫자 그룹을 지어 묶어줍니다. replace() 메서드로 각 그룹($1, $2, $3)을 순서대로 배치하고 사이에 하이픈을 추가시켜 하이픈이 추가된 전화번호를 완성시켜 줍니다. const phone = "010-12345678"; phone .replace(/[^0-9]/g, '') // 숫자를 제외한 모든 문자 제거 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-..