간단한 전화 번호 선택기를 만드는 방법
전화 번호, 이름과 이메일 외에도 온라인 양식에서 가장 자주 사용되는 연락처 정보입니다. 전화 번호 필드는 일반적으로 사용자가 키보드를 사용하여 숫자를 입력해야하는 방식으로 설계되었습니다. 이 방법은 종종 부정확 한 데이터 입력을 초래합니다..
에 사용자 입력 오류 감소 사이트의 사용자 경험을 향상 시키면 GUI 사용자가 날짜 선택기와 비슷한 방식으로 전화 번호를 빠르게 입력 할 수있게 해줍니다..
이 자습서에서는 간단한 전화 번호 선택기를 입력 필드에 추가하십시오.. 아래의 데모에서 볼 수 있고 테스트 할 수있는 GUI로 이동하기 위해 HTML5, CSS3 및 JavaScript를 사용할 것입니다. 또한 정규 표현식을 사용하여 사용자가 유효한 전화 번호를 실제로 입력하는지 확인합니다..
1. 전화 번호 필드 만들기
먼저, 입력 필드 만들기 오른쪽의 다이얼 아이콘은 클릭시 다이얼 화면을 엽니 다. 다이얼 아이콘은 9 개의 검은 색 상자처럼 보이고, 3 x 3으로 정렬되며 일반 전화에서 보는 것과 같아야합니다..
나는 전화 적절한 HTML5 의미 체계를위한 입력 유형이지만 본문 원하는 경우 입력 유형.
2. 다이얼 스크린 만들기
그만큼 다이얼 스크린 ~이다. 숫자 그리드 0에서 9까지의 특수 문자를 더한 것. 그것으로 만들 수 있습니다. HTML 여기서는 JavaScript로 다이얼 스크린 테이블을 만드는 방법을 보여 드리겠습니다. 물론 HTML 소스 코드에서 테이블을 직접 추가 할 수도 있습니다.. 먼저, 새로운 을 추가하다 두 사람 마지막 열은 다음과 같이 구성되어 있습니다. 2 개의 특수 문자, 다이얼 화면의 마지막 행을 만들려면 다음을 추가하십시오 그만큼 다이얼 스크린이 이제 완료되었습니다., 그것을에 추가하십시오. 더 매력적 이도록, 다이얼 스크린 스타일 CSS와. 반드시 내 스타일을 고수하지 않아도되지만 잊지 마세요. 더하다 먼저, 그런 다음 다이얼 이벤트 핸들러를 다이얼 아이콘에 추가합니다. 자바 스크립트 에 가시성을 토글합니다. 다이얼 화면. 그렇게하기 위해서는 위에서 언급 한 그만큼 다음과 같은 사용자 정의 함수를 추가하십시오. 전화 번호 필드에 숫자를 입력합니다. 다이얼 화면의 셀 클릭. 그만큼 이제, 당신은 작업 다이얼 스크린 전화 번호 입력란. CSS를 따라 잡으려면 배경에있는 숫자의 배경색을 변경하십시오. 을 추가하다 간단한 정규식 검증 사용자가 전화 번호를 확인하는 동안 숫자를 입력 필드에 입력합니다.. 내가 사용하는 유효성 검사 규칙에 따르면 전화 번호는 숫자 또는 숫자로만 시작할 수 있습니다. Debuggex 앱으로 만든 아래의 스크린 샷에서 내 정규 표현의 시각화를 볼 수 있습니다.. 해당 국가 또는 지역의 전화 번호 형식에 따라 전화 번호의 유효성을 검사 할 수도 있습니다. 새 정규 표현식 개체를 만들고이를 입력이 유효하지 않으면 나는 빨간색 테두리 추가 입력이 유효하지 않을 때 입력 필드로 이동하지만 다른 방법으로 사용자에게 알릴 수 있습니다 (예 : 오류 메시지 포함).. 그만큼 나는 또한 추가 검증 최대 문자 수는 15자를 초과 할 수 없습니다. 너의 전화 번호 선택 도구 이제 준비가되었습니다. 아래의 최종 데모를 확인하십시오.. 또는 JavaScript.
'표' 요소의 DOM ~을 사용하여 createElement () 방법. 또한 '다이얼' 식별자. / * 전화 걸기 화면 만들기 * / var dial = document.createElement ( 'table'); dial.id = '전화 걸기';
...에 대한 고리 그것을 사용하여 다이얼 테이블의 네 줄을 삽입하십시오. 그런 다음 각 행에 대해, 다른 것을 달리다 ...에 대한 고리 행당 세 개의 셀을 추가하려면. 각 셀에 표시 와 더불어 'dialDigit' 수업. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
...에 대한 위의 루프는 다이얼 테이블의 셀에 들어가는 자릿수를 계산합니다. cell.textContent 속성 - 다음과 같은 방법으로 : 제 1 행 * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + (행 번호 3) 0 * 3) = 3 / * 2 행 * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + 6 / * 등 * /
- 과 + 지역 코드를 식별하기 위해 전화 번호 형식에 사용되는 숫자 및 숫자 0.만약 내면의 진술 ...에 대한 고리. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper 1 단계에서 만든 HTML 컨테이너 두 가지 DOM 메소드:querySelector () 방법 컨테이너를 선택하십시오.appendChild () 방법 다이얼 화면 추가 - 개최 다이얼 변수 - 컨테이너에 document.querySelector ( '# dialWrapper'). appendChild (다이얼);
3. 다이얼 스크린 스타일 지정
사용자 선택 : 없음; 재산을 #다이얼 컨테이너 사용자가 숫자를 클릭하는 동안 텍스트 커서로 선택되지 않는다.. #dial 너비 : 200px; 높이 : 200px; 국경 붕괴 : 붕괴; 텍스트 정렬 : 가운데; 위치 : 상대적; -ms-user-select : 없음; -webkit-user-select : none; -moz-user-select : none; 사용자 선택 : 없음; color : # 000; 상자 그림자 : 0 0 6px # 999; .dialDigit 테두리 : 1 픽셀 단색 #fff; 커서 : 포인터; background-color : rgba (255,228,142, .7);
4. 클릭시 다이얼 화면 표시
가시성 : 숨김; 스타일 규칙 #다이얼 위의 CSS에서 에 다이얼 화면 숨기기 기본적으로. 사용자가 다이얼 아이콘을 클릭 할 때만 표시됩니다..querySelector () 그리고 addEventListener () 행동 양식. 후자의 클릭 이벤트를 첨부합니다. 다이얼 아이콘으로 이동하여 사용자 정의 toggleDial () 기능.toggleDial () 기능 가시성을 바꾼다. 다이얼 화면의 숨김에서 보이기까지 및 뒤로. document.querySelector ( '# dialIcon'). addEventListener ( '클릭', 토글 다이얼); function toggleDial () dial.style.visibility = dial.style.visibility === '숨김'|| dial.style.visibility === "? 'visible': 'hidden';
5. 기능 추가
전화 번호() 기능 자릿수를 하나씩 추가합니다. ~로 텍스트 콘텐츠 입력란의 속성 #전화 번호 식별자. phoneNo = document.querySelector ( '# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ( '. dialDigit'); for (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : 마우스 오버 과 :유효한 (사용자가 클릭 할 때) 상태. .dialDigit : hover 배경색 : rgb (255,228,142); .dialDigit : 활성 배경색 : # FF6478;
6. 정규 표현식 유효성 검사 추가
+ 문자를 입력하고 - 이후 캐릭터.
무늬 변하기 쉬운. 또한 사용자 정의를 작성하십시오. validate () 입력 된 전화 번호를 확인하는 기능 정규 표현식을 준수합니다., 만약 그렇다면 최소 8 자 이상.validate () 기능이 필요하다 피드백을 주다. 사용자에게. pattern = new RegExp ( "^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); function validate (txt) // 유효한 전화 번호로 적어도 8 자. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true;
7. 유효성 검사 수행
validate () 기능들 부름을받을 필요가있다. 유효성 확인을 수행하기 위해 그것으로부터 전화하십시오. 전화 번호() 함수의 값을 확인하기 위해 5 단계에서 만든 함수 전화 번호 변하기 쉬운.만약 성명서. function dialNumber () var val = phoneNo.value + this.textContent; // 허용되는 최대 문자 수, 15 if (val.length> 15) false를 반환합니다. validate (val); phoneNo.value = val;
