HTML5에 input type을 float 타입으로 활용하는 방법

질문 : HTML5에 부동 입력 유형이 있습니까?

---

html5.org 에 따르면 "숫자"입력 유형의 "값 속성이 지정되고 비어 있지 않은 경우 유효한 부동 소수점 숫자 인 값을 가져야합니다."

그러나 이것은 단순히 (최신 버전의 Chrome에서) 부동이 아닌 정수를 사용하는 "업다운"컨트롤입니다.

<input type="number" id="totalAmt"></input>

 

HTML5 고유의 부동 소수점 입력 요소가 있습니까? 아니면 숫자 입력 유형이 정수가 아닌 부동 소수점과 함께 작동하도록 만드는 방법이 있습니까? 아니면 jQuery UI 플러그인을 사용해야합니까?

답변

---

number 유형에는 max 및 min 과 함께)를 제어 step 값이 있으며 기본값은 1 입니다. 이 값은 스테퍼 버튼 구현에서도 사용됩니다 (예 : 위로 누르면 step 증가).

이 값을 적절한 값으로 변경하기 만하면됩니다. 돈의 경우 소수점 이하 두 자리가 예상됩니다.

<input type="number" step="0.01">

(양수가 될 수만 있다면 min=0 설정합니다)

소수 자릿수를 허용하려면 step="any" 사용할 수 있습니다 (통화의 경우 0.01 고수하는 것이 좋습니다). Chrome 및 Firefox에서 스테퍼 버튼은 .NET Framework를 사용할 때 1 씩 증가 / 감소 any . any 것을 지적한 Michal Stefanow의 답변에 감사 드리며 여기에서 관련 사양을 참조하십시오 )

다음은 다양한 단계가 다양한 입력 유형에 미치는 영향을 보여주는 놀이터입니다.

 

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>

평소와 같이 간단한 메모를 추가 할 것입니다. 클라이언트 측 유효성 검사는 사용자의 편의에 불과하다는 점을 기억하십시오. 서버 측에서도 유효성을 검사해야합니다!

출처 : https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5