HTML DOM 입력 숫자 개체

<시간/>

HTML DOM 입력 숫자 개체는

입력 숫자 개체를 만드는 방법을 살펴보겠습니다.

구문

다음은 구문입니다 -

var numberInput = document.createElement(“INPUT”);
numberInput.setAttribute(“type”,”number”);

속성

다음은 입력 번호 Object의 속성입니다 -

속성	설명
자동 완성	숫자 입력 필드의 자동 완성 속성 값을 반환하고 변경합니다.
자동 초점	입력된 숫자 필드가 페이지 로드 시 포커스를 받아야 하는지 여부를 반환하고 수정합니다.
비활성화	입력된 숫자 필드의 비활성화 여부를 반환하고 수정합니다.
기본값	입력된 숫자 필드의 기본값을 반환하고 변경합니다.
형식	HTML 문서에서 입력 숫자 필드를 포함하는 양식의 참조를 반환합니다.
목록	입력 번호 필드를 포함하는 데이터 목록의 참조를 반환합니다.
최대	입력된 숫자 필드의 max 속성 값을 반환하고 수정합니다.
분	입력된 숫자 필드의 min 속성 값을 반환하고 수정합니다.
이름	입력 번호 필드의 이름 속성 값을 반환하고 변경합니다.
읽기 전용	입력된 숫자 필드가 읽기 전용인지 여부를 반환하고 수정합니다.
필수	양식을 제출하기 전에 숫자 필드를 채워야 하는지 여부를 반환하고 수정합니다.
단계	입력 번호 필드의 설정 속성 값을 반환하고 변경합니다.
유형	숫자 입력 필드의 type 속성 값을 반환합니다.
값	숫자 입력 필드의 값 속성의 내용을 반환하고 수정합니다.
자리 표시자	숫자 입력 필드의 placeholder 속성 값을 반환하고 수정합니다.

방법

다음은 숫자 개체를 입력하는 방법입니다.

메서드	설명
stepUp()	입력된 숫자 필드의 값을 매개변수에 지정된 값만큼 증가시킵니다.
스텝다운()	입력된 숫자 필드의 값을 매개변수에 지정된 값만큼 감소시킵니다.

예시

입력 숫자 개체의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<style>

   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   form{
      margin:2.5rem auto;
   }
   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }
   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 입력 숫자 개체

"입력 번호 필드 만들기를 클릭합니다. ” 버튼을 눌러 숫자 입력란을 생성합니다.

HTML DOM 입력 숫자 개체