HTML5에 플로트 입력 타입이 있나요?

HTML5에 플로트 입력 타입이 있나요?

html5.org에 따르면 "number" 입력 유형의 "value attribute(지정된 경우 및 비어 있지 않은 경우)"는 유효한 부동 소수점 번호의 값을 가져야 합니다.

그러나 이것은 (어쨌든) Chrome의 최신 버전에서는 단순히 정수가 있는 "업다운" 컨트롤이지 플로트가 아닙니다.

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

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

그numbertype에는 a가 있습니다.step(와 함께) 유효한 수치를 제어하는 값)max그리고.min디폴트 설정)1이 값은 스테퍼 버튼 구현에서도 사용됩니다(즉, 위쪽으로 누르는 횟수가 증가함).step).

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

<label for="totalAmt">Total Amount</label>
<input type="number" step="0.01" id="totalAmt">

(저도 세팅하겠습니다.min=0긍정적일 수만 있다면)

소수점 이하를 원하는 경우 다음을 사용할 수 있습니다.step="any"(단, 통화의 경우, 저는 이 방법을 고수할 것을 권장합니다.0.01). Chrome & Firefox에서는 Stepper 버튼을 사용할 때 스테퍼 버튼이 1씩 증가/감소합니다.any(Michal 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/

하지만 모든 숫자가 유효하고 정수와 소수점이 같기를 바란다면요?이 경우 단계를 "임의"로 설정합니다.

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

---

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

다음을 사용할 수 있습니다.

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

스텝 Atribut은 입력 유형 번호에 사용할 수 있습니다.

<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.41, 0.42, 0.42 ... 0.7에서 max를 정의합니다.

는 ★★★★★★★★★★★★★★★★★★★★★★★★★를 사용하기 시작했습니다.inputmode="decimal"이치노

<input type="text" inputmode="decimal" value="1.5">

, 이 에는 '우리'를 .type="text"number그러나 데스크톱에서는 여전히 문자로 값을 지정할 수 있습니다.

데스크톱의 경우 다음을 사용할 수 있습니다.

<input type="number" inputmode="decimal">

에, 「」가 가능하게 됩니다.0-9 ★★★★★★★★★★★★★★★★★」.입력 및 숫자만 표시됩니다.

에서는 「」를 사용하고 있는 해 주세요.,NumPad에서 기본값으로 활성화되는 십진수 나눗셈자로 지정합니다.은 입력 에 "Numpad"가 ..그래서 이렇게 써야 요.type="text"웹 사이트에 해외 사용자가 있는 경우.

데스크톱(Numpad 사용) 및 전화기에서 이 기능을 사용해 볼 수 있습니다.

<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">

참고 자료: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

네, 정답은 다음과 같습니다.

step="any"

이게 더 효율적입니다.절 믿으세요.

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

document.getElementById('form1').addEventListener('submit', function(e){
e.preventDefault();
alert("Your nnumber is: "+document.getElementById('n1').value)
alert("This works no ? :) please upvote")
})

<form id="form1">
<input type="number" step="any" id="n1">
<button type="submit">Submit</button>
</form>
<!-- UPVOTE :)-->

같은 문제가 있었습니다만, 마침표/풀스톱이 아니라 쉼표만 찍어도 프랑스 현지화 때문에 수정할 수 있었습니다.

다음과 같이 동작합니다.

2면 충분합니다

2, 5면 충분합니다.

2.5는 KO입니다(이 번호는 "불법"으로 간주되어 빈 값을 받습니다).

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

이 방법은 저에게 효과가 있었고, 소수점 부분의 길이에 관계없이 입력 필드가 십진수를 받아들이도록 하는 가장 쉬운 방법이라고 생각합니다.스텝 애트리뷰트는 실제로 입력 필드에 허용되는 소수점 수를 나타냅니다.예: step="0.01"은 소수점 두 개만 허용합니다.

[ IPad ]를 하여 [IPAD]React]를 합니다.type="number"내게는 완벽하게 먹히지 않는다.에는 정규 99.99999 - .00000 을 합니다.(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$) 번째 그룹입니다(...)는 부동소수점 23 즉 23)이 모든 됩니다.|두 그룹인 .(...). 할 수 만 하면 .{0,2} ★★★★★★★★★★★★★★★★★」{0,5}각각 다음과 같다.

<input
  className="center-align"
  type="text"
  pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
  step="any"
  maxlength="7"
  validate="true"
/>

토픽 ★★★★★★★★★★★★★★★★★★★★★★★★:step="0.01")는 stepMismatch와 관련되어 있으며 다음과 같이 모든 브라우저에서 지원됩니다.

어떤 메서드가 동작하지 않으면 해석 플로트를 사용할 수 있습니다.

const totalAmt = document.getElementById("totalAmt");


totalAmt.addEventListener("change", (e)=>{
      // e.preventDefault(e);
      const result = parseFloat(e.target.value);
     console.log(result)
});

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

언급URL : https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5