[해피CGI][cgimall] TailwindCSS로 스타일링된 최신 jQuery 태그 입력 시스템

- 소개

TailwindCSS 태그 입력 시스템은 표준 입력 필드를 부드러운 애니메이션과 TailwindCSS 스타일을 적용한 대화형 태그 입력으로 변환하는 가벼운 jQuery 플러그인입니다. 

- 라이센스

MIT





- 사용 방법


1. 필요한 jQuery 라이브러리와 TailwindCSS를 문서에 로드합니다. 프로덕션 환경에서는 CDN 대신 TailwindCSS CLI 도구를 사용하여 TailwindCSS를 올바르게 설치하는 것이 좋습니다. CDN 버전은 사용자 지정 및 제거 기능이 없습니다.

2. 문서에 TailwindCSS 태그 입력 시스템 파일을 로드합니다.

3. 문서 내 모든 표준 입력 필드에 tag-input 클래스를 추가합니다. 쉼표로 구분된 값으로 미리 채워 넣을 수도 있습니다.

4. 문서가 준비되면 TailwindCSS 태그 입력 시스템을 초기화합니다.

5. Query 플러그인은 키 keydown(Enter 및 쉼표)를 자동으로 처리하고, blur입력 폼이 포커스를 잃었을 때 태그를 생성하며, click태그 제거 이벤트를 자동으로 처리합니다. 폼이 제출되면 태그 시스템과 연결된 숨겨진 입력 폼에 쉼표로 구분된 깔끔한 태그 값 문자열이 저장됩니다.

6. 프로그래밍 방식으로 태그 값을 설정하고 가져옵니다.

7. 다음 addTag 함수를 사용하여 사용자 정의 검증을 추가합니다.

- 작동 화면