javascript input으로 전화번호 000-0000-0000 형식으로 포커스가 이동하면 보여지기

JavaScript를 사용하여 입력란에 전화번호를 입력할 때, 숫자를 입력할 때마다 자동으로 형식에 맞게 하이픈이 추가되도록 만들 수 있습니다. 또한, 포커스가 이동하면 입력된 전화번호를 형식에 맞게 보여주는 기능을 추가할 수 있습니다.

다음은 해당 기능을 구현한 JavaScript 코드 예시입니다:

```html
<input type="text" id="phoneInput" maxlength="13" onkeyup="formatPhoneNumber()" placeholder="000-0000-0000">

<script>
function formatPhoneNumber() {
  const phoneInput = document.getElementById("phoneInput");
  let phoneNumber = phoneInput.value.replace(/[^0-9]/g, ""); // 입력된 값에서 숫자만 추출합니다.
  
  if (phoneNumber.length > 10) {
    phoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); // 전화번호를 형식에 맞게 변환합니다.
  }
  
  phoneInput.value = phoneNumber; // 변환된 전화번호를 입력란에 설정합니다.
}

// 입력란에 포커스가 이동하면 형식에 맞게 변환된 전화번호를 보여줍니다.
document.getElementById("phoneInput").addEventListener("focus", formatPhoneNumber);
</script>
```

위의 코드에서는 `<input>` 요소에 `id="phoneInput"`을 설정하여 전화번호를 입력 받을 수 있는 입력란을 생성합니다. 입력란은 `maxlength="13"`로 설정되어 최대 13자리까지 입력할 수 있도록 제한됩니다. `onkeyup="formatPhoneNumber()"` 속성을 사용하여 입력란에 숫자가 입력될 때마다 `formatPhoneNumber()` 함수가 호출되도록 설정합니다.

`formatPhoneNumber()` 함수는 입력된 값에서 숫자만 추출한 후, 전화번호 형식에 맞게 하이픈을 추가하여 변환합니다. 변환된 전화번호를 다시 입력란에 설정하여 보여줍니다.

또한, 입력란에 포커스가 이동하면 `formatPhoneNumber()` 함수를 호출하여 현재 입력된 전화번호를 형식에 맞게 보여줍니다.

위의 코드를 웹 페이지에 적용하면, 입력란에 전화번호를 형식에 맞게 입력할 수 있으며, 포커스가 이동할 때마다 입력된 전화번호가 형식에 맞게 보여집니다.