This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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> 컨테이너를 포함하고 있습니다.
<label for="number">Pick a number between 1 and 10:</label><input name="number" min="1" max="10" type="number" /><pre></pre>JavaScript
<pre> 요소의innerText는change 이벤트가 발생할 때마다<input>의 현재 값으로 업데이트 됩니다.
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>을 포함하고 있습니다.
<label for="date">Pick a date and time:</label><input name="date" type="datetime-local" /><pre></pre>JavaScript
날짜와 시간이 선택되지 않으면 빈 문자열이NaN으로 처리됩니다. 시간이 선택될 때마다change 이벤트가 발생하며,<pre> 콘텐츠가 업데이트 되어 폼 컨트롤의HTMLInputElement.value 값을 숫자 값과 비교하여 표시됩니다.
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;}결과
명세서서
| Specification |
|---|
| HTML # dom-input-valueasnumber-dev |