HTMLInputElement: valueAsNumber 속성

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

valueAsNumber 속성은 HTMLInputElement 인터페이스에서 <input> 요소의 현재 값을 숫자로 반환하고 숫자로 변환할 수 없는 경우 NaN을 반환합니다.

또한, 특정 조건에 따라 속성을 직접 설정하여 기본 숫자 값을 지정할 수 있습니다.

값

요소의 값을 나타내는 숫자이며 숫자로 변환할 수 없는 경우 NaN

예제

숫자 값 가져오기

이번 예제에서는 number 입력 값이 변경될 때 로그에 현재 값이 표시됩니다.

HTML

number 타입의 <input>, 이와 연관된 <label> 그리고 출력을 위한 <pre> 컨테이너를 포함하고 있습니다.

html
<label for="number">Pick a number between 1 and 10:</label>

<input name="number" id="number" min="1" max="10" type="number" />

<pre id="log"></pre>

JavaScript

<pre> 요소의 innerText는 change 이벤트가 발생할 때마다 <input>의 현재 값으로 업데이트 됩니다.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("number");

inputElement.addEventListener("change", () => {
  logElement.innerText = `Number: ${inputElement.valueAsNumber}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

결과

위젯에서 숫자를 삭제하면 결과는 NaN이 됩니다.

날짜 값을 숫자로 변환하여 가져오기

이번 예제에서는 datetime-local 타입의 <input>에서 valueAsNumber 속성을 보여줍니다.

HTML

datetime-local 타입의 <input>을 포함하고 있습니다.

html
<label for="date">Pick a date and time:</label>

<input name="date" id="date" type="datetime-local" />

<pre id="log"></pre>

JavaScript

날짜와 시간이 선택되지 않으면 빈 문자열이 NaN으로 처리됩니다. 시간이 선택될 때마다 change 이벤트가 발생하며, <pre> 콘텐츠가 업데이트 되어 폼 컨트롤의 HTMLInputElement.value 값을 숫자 값과 비교하여 표시됩니다.

js
const logElement = document.getElementById("log");
const inputElement = document.getElementById("date");

logElement.innerText = `Initial value: ${inputElement.valueAsNumber}`;

inputElement.addEventListener("change", () => {
  const d = new Date(inputElement.valueAsNumber);
  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsNumber}, \nwhich is ${d.toDateString()} at ${d.toTimeString()}`;
});

#log {
  height: 20px;
  padding: 0.5rem;
  background-color: #ededed;
}

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025년 5월 29일 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: valueAsNumber 속성

In this article

값

예제

숫자 값 가져오기

HTML

JavaScript

결과

날짜 값을 숫자로 변환하여 가져오기

HTML

JavaScript

결과

명세서서

브라우저 호환성

같이 보기

Help improve MDN