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

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

그러나 그것은 (어쨌든 최신 버전의 Chrome에서), 수레가 아닌 정수가있는 "업다운"컨트롤입니다.

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

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

number유형은 갖는 step(함께 유효 숫자되는 제어 값 max과 min), 디폴트는 1. 이 값은 스테퍼 버튼에 대한 구현에서도 사용됩니다 (예 :을 누르면 증가 step).

이 값을 적절한 것으로 변경하십시오. 돈의 경우 소수점 이하 두 자리가 예상됩니다.

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

( min=0긍정적으로 만 가능하다면 설정 했습니다)

소수 자릿수를 허용하려면 step="any"통화를 사용할 수는 있지만 사용할 수는 있습니다 0.01. Chrome 및 Firefox에서는를 사용할 때 스테퍼 버튼이 1 씩 증가 / 감소합니다 any. (지적 마이클 Stefanow의 대답에 감사 any하고, 여기에 관련 사양 참조 )

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

<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>

평소와 같이 간단한 메모를 추가하겠습니다. 클라이언트 측 유효성 검사는 사용자에게 편의 일뿐입니다. 서버 측에서도 확인해야합니다!

경유 : http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

그러나 모든 숫자, 정수 및 소수를 모두 유효하게하려면 어떻게해야합니까? 이 경우 단계를 "any"로 설정하십시오.

<input type="number" step="any" />

다른 브라우저에서는 테스트되지 않은 Chrome에서 작동합니다.

당신이 사용할 수있는:

<input type="number" step="any" min="0" max="100" value="22.33">

단계 속성을 입력 유형 번호에 사용할 수 있습니다.

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

step="any"소수를 허용합니다.
step="1"소수점을 허용하지 않습니다.
step="0.5"0.5를 허용합니다; 1; 1.5; ...
step="0.1"0.1을 허용합니다; 0.2; 0.3; 0.4; ...

이 답변을 바탕으로

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

의미 :

문자 코드 :

• 48-57과 같음 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0은 Backspace(그렇지 않으면 Firefox에서 새로 고침 페이지가 필요함)
• 46은 dot

&&이고 AND, ||이다 OR연산자.

쉼표로 플로트를 시도하면 :

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

지원되는 Chromium 및 Firefox (Linux X64) (다른 브라우저는 존재하지 않습니다.)

나는 그렇게

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

그런 다음 0.01 단계에서 0.4를 0.4로 정의하고 0.7을 최대로 정의합니다 .0.4, 0.41, 0,42 ... 0.7

난 그냥 같은 문제가 있고, 난 그냥 넣어 그것을 고칠 수 콤마 가 아닌 기간 / 마침표를 때문에 수의 프랑스어 현지화 .

그래서 그것은 작동합니다 :

2 괜찮습니다

2,5 괜찮습니다

2.5는 KO입니다 (숫자는 "불법"으로 간주되며 빈 값을받습니다).