<입력 유형 =“숫자”>에 소수점 이하 2 자리 허용

나는 a를 가지고 있으며 <input type="number">사용자 입력을 순수하게 소수 또는 소수점 이하 2 자리까지의 숫자로 제한하고 싶습니다.

기본적으로 가격 입력을 요청합니다.

정규식을 피하고 싶었습니다. 그것을 할 수있는 방법이 있습니까?

<input type="number" required name="price" min="0" value="0" step="any">

step="any"소수점 이하 자릿수를 허용하는 대신을 사용 step=".01"하여 소수점 이하 두 자리까지 허용합니다.

사양에 대한 자세한 내용은 https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

임의의 소수점 이하 자릿수가 2 개인 숫자 만 허용하는 정규식을 찾는 사람이있는 경우

^\d*(\.\d{0,2})?$

예를 들어 아래 솔루션이 상당히 신뢰할 수 있음을 발견했습니다.

HTML :

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery :

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

통화의 경우 다음과 같이 제안합니다.

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

http://jsfiddle.net/vx3axsk5/1/ 참조

HTML5 속성 "step", "min"및 "pattern"은 양식을 제출할 때 onblur가 아닌 유효성이 검사됩니다. 당신은 필요하지 않습니다 step당신이있는 경우에 pattern당신은 필요하지 않습니다 pattern당신이있는 경우 step. step="any"패턴이 어쨌든 유효성을 검사하므로 코드로 되돌릴 수 있습니다.

onblur의 유효성을 검사하려면 사용자에게 시각적 신호를주는 것이 배경색을 색칠하는 것과 같이 도움이된다고 생각합니다. 사용자의 브라우저가 지원하지 않으면로 type="number"대체됩니다 type="text". 사용자의 브라우저가 HTML5 패턴 유효성 검사를 지원하지 않으면 JavaScript 스 니펫이 양식 제출을 방해하지 않지만 시각적 신호를줍니다. 따라서 HTML5가 열악한 사람들이나 JavaScript를 비활성화하거나 HTTP 요청을 위조하여 데이터베이스를 해킹하려는 사람들은 어쨌든 서버에서 다시 유효성을 검사해야합니다. 프론트 엔드에서 유효성을 검사하는 요점은 더 나은 사용자 경험을위한 것입니다. 따라서 대부분의 사용자에게 좋은 경험이있는 한 코드가 여전히 작동하고 백엔드에서 유효성을 검사 할 수 있다면 HTML5 기능을 사용하는 것이 좋습니다.

1 단계 : HTML 번호 입력 상자를 onchange 이벤트에 연결

myHTMLNumberInput.onchange = setTwoNumberDecimal;

또는 HTML 코드에서

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" />

2 단계 : setTwoDecimalPlace메소드 작성

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

toFixed()메소드에 전달 된 값을 변경하여 소수 자릿수를 변경할 수 있습니다 . MDN 문서를 참조하십시오 .

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

jQuery를 사용하는 것이 최선의 해결책이라는 것을 알았습니다.

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

입력 유형에서 소수점 이하 2 자만 허용하려면 이것을 시도하십시오.

<input type="number" step="0.01" class="form-control"  />

또는 @SamohtVII가 제안한 jQuery를 사용하십시오.

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

이 코드를 사용하십시오

<input type="number" step="0.01" name="amount" placeholder="0.00">

기본적으로 HTML5 입력 요소의 단계 값은 step = "1"입니다.

그냥 써

<input type="number" step="0.1" lang="nb">

lang = 'nb "쉼표 또는 마침표로 10 진수를 쓸 수 있습니다

입력시 :

step="any"
class="two-decimals"

스크립트에서 :

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});