말 나온 김에 만들어본 "전화번호 입력 도우미" 애드온

어제 전화번호 관련 이야기를 나누다가 문득 생각이 들어서 애드온으로 만들어봤습니다.

1. 전화번호(phone) 형식 확장변수 입력시 ( 즉, $act === 'dispBoardWrite' )

- text type의 input 태그 세 개가 출력되는데, 이것을 tel type input 태그로 바꿔줍니다. 태그 안의 class 속성 등은 그대로니 스킨상에서는 일반적인 text input처럼 보일 겁니다.

- 기존의 text type input들은 hidden type 처리됩니다.

- 입력은 0으로만 시작하게 해서 자동으로 하이픈이 붙게 됩니다. 최대 입력 글자수는 자동으로 붙는 하이픈 포함 13개입니다.

- 새로운 tel type input의 입력값들은 하이픈을 기준으로 hidden 처리된 기존 input들에 자동으로 분배되어 입력됩니다. 따라서 DB에 입력되는 데이터는 기존의 전화번호 형식과 동일하게 처리됩니다.

=> 쉽게 말해, 전화번호를 하나의 입력창에 숫자만 넣을 수 있게 했습니다. 한국식 번호체계에 맞춰 자동으로 하이픈이 붙구요. 모바일에서도 입력하기 수월해집니다.

2. 전화번호 형식 확장변수 검색시 (즉, $act === 'dispBoardContent' )

- 우선 extra_keys변수를 가져옵니다. 거기서 type이 'tel'인 변수의 idx 값을 가져와서 스크립트 변수로 정의해둡니다.

- 검색창 input을 하나 더 clone해두고 기존 input은 hidden 처리, 새 input으로 키워드를 입력합니다. 물론 input 이벤트를 통해 키워드는 곧장 기존 input으로도 자동 입력됩니다.

- search_target을 결정하는 select 메뉴의 option 값이 'tel'을 type값으로 가지는 확장변수인 경우 검색창 input에는 숫자와 하이픈만 입력가능하게 합니다. 기존 input에도 자동 입력됩니다. 단, 하이픈이 입력되는 경우에 한해 기존 input에는 |@|라고 입력됩니다.

- 물론, select 메뉴의 option이 다른 값으로 선택되면 키워드 input 창은 원래 방식으로 복원됩니다.

=> 쉽게 말해, 이제는 전화번호 검색할 때 숫자와 하이픈을 넣어도 검색결과가 제대로 반영이 됩니다.

... 테스트용이니까 무료하고 심심할 때 재미 삼아 한번 사용해보세요~ :)

스케치북 스킨에서도 사용 가능한 두 번째 버전도 나왔습니다. ( https://xetown.com/topics/1151762 )