2009-03-31 2 views
1

나는 웹 페이지에 전화 번호를 입력하기위한 3 개 개의 입력 상자가 있습니다웹 페이지의 전화 번호 입력에 어떤 JavaScript를 사용해야합니까?

XXX XXX XXXX 

난 당신이 입력 상자 사이에 사용자를 이동 자바 스크립트가 필요합니다. 세 번째 문자 다음에 두 번째 상자로 이동합니다.

예전에는 백 스페이스에 문제가있었습니다. 두 번째 상자에서 백 스페이스를 클릭하면 처음에 나를 넣었지만 두 번째 상자로 돌아옵니다.

가장 좋은 방법은 무엇입니까?

답변

5

당신은 내가 대신 세 가지의 원 박스 솔루션가는 게 좋을 것이

<div><strong>Phone Number:</strong></div> 
<input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> - 
<input type="text" name="number1" id="number1" maxlength="3" size="3" /> - 
<input type="text" name="number2" id="number2" maxlength="4" size="5" /> 


<script type="text/javascript"> 
$(document).ready(function() { 
$('#area_code').autotab({ target: 'number1', format: 'numeric' }); 
$('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code'  }); 
$('#number2').autotab({ previous: 'number1', format: 'numeric' }); 
}); 
</script> 
1

개인적으로, 나는 단지 거의 을 수락 할 것이고과 서버 측을 다시 포맷하는 것에 대해 걱정할 필요가 없습니다. 나는 너무 많은 나쁜 자바 스크립트 전화 포맷터를 사용해야 만했다. 나는 큰 팬이 아니다.

+0

이 도움이

희망,

Yuval 교수 = 8-) ...하지만 고객의 요구 사항을 충족하기 위해 노력하고있어. – Jason

+0

이상한 - 고객은 일반적으로 그런 특별한 것을 요구하지 않습니다. 숫자를 많이 입력하는 경우 더 큰 입력란에 복사하여 붙여 넣고 텍스트를 구문 분석하는 것이 좋습니다. –

+0

전적으로 동의합니다. 그 전화 포맷터는 대부분의 시간을 빨아 먹는다. 서버 측에서 잘못된 입력을 처리하십시오! – James

0

같은 예 코드를 jQuery를AutoTab

를 사용해야합니다. 첫 번째 상자가 .select() 일 때 너무 많은 두통과 뾰족한 상자가 튀어 나오면 사용자가 지우고 지우는 경우가 있습니다. 불쾌한. 당신이 원하는 수

http://javascript.internet.com/forms/format-phone-number.html

모든 자동 서식. 물론 이것은 북미 표준이며, RestOfTheWorld에 대해이를 수정해야합니다.

-3

첫 번째 필드에 포커스가있을 때 입력을 확인하고 이미 입력 한 문자 수를 계산 한 다음 충분한 문자를 입력했으면 두 번째 필드로 포커스를 이동하는 식으로 키 수신기를 사용합니다. 나는 동의