형식을 지정하는 방법이 있습니까? input[type='number']항상 소수점 이하 두 자리를 표시 값을 있습니까?
예 : 0.00대신 보고 싶습니다 0.
답변
제안 사항에 따라 해결하고 jQuery를 추가하여 정수 형식을 강제로 적용했습니다.
parseFloat($(this).val()).toFixed(2)답변
정말 할 수는 없지만 중간 단계는 다음과 같을 수 있습니다.
<input type='number' step='0.01' value='0.00' placeholder='0.00' />답변
은 Using step속성은 그것을 가능하게 할 것이다 . 순환해야하는 양뿐만 아니라 허용되는 숫자도 결정합니다. 사용 하는 것이 트릭을 수행 step="0.01" 해야 하지만 이것은 브라우저가 표준을 어떻게 준수하는지에 따라 달라질 수 있습니다.
<input type='number' step='0.01' value='5.00'>답변
사용하는 솔루션 input="number" step="0.01"은 Chrome에서 잘 작동하지만 일부 브라우저, 특히 필자의 경우 Frontmotion Firefox 35에서는 작동하지 않습니다. 지원해야합니다.
내 솔루션은 다음과 같이 Igor Escobar의 jQuery Mask 플러그인을 사용하는 jQuery였습니다.
<script src="/your/path/to/jquery-mask.js"></script>
<script>
$(document).ready(function () {
$('.usd_input').mask('00000.00', { reverse: true });
});
</script>
<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">이것은 잘 작동하지만 나중에 제출 된 값을 확인해야합니다. 🙂 참고, 브라우저 호환성을 위해이 작업을 수행 할 필요가 없다면 @Rich Bradshaw의 위 답변을 사용할 것입니다.
답변
@Guilherme Ferreira 의이 답변을 기반으로 parseFloat필드가 변경 될 때마다 메서드를 트리거 할 수 있습니다 . 따라서 사용자가 수동으로 숫자를 입력하여 값을 변경하더라도 값은 항상 소수점 두 자리를 표시합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".floatNumberField").change(function() {
$(this).val(parseFloat($(this).val()).toFixed(2));
});
});
</script>
<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />답변
이것은 사용자가 입력을 완료하지 않은 경우 자동으로 2 자리로 반올림하지 않고 소수점 이하 2 자리까지 강제 적용합니다.
function naturalRound(e) {
let dec = e.target.value.indexOf(".")
let tooLong = e.target.value.length > dec + 3
let invalidNum = isNaN(parseFloat(e.target.value))
if ((dec >= 0 && tooLong) || invalidNum) {
e.target.value = e.target.value.slice(0, -1)
}
}답변
소수점 이하 2 자리 로 제한 하는 방법이 궁금하다면 네이티브 자바 스크립트 솔루션이 있습니다.
자바 스크립트 :
function limitDecimalPlaces(e, count) {
if (e.target.value.indexOf('.') == -1) { return; }
if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
e.target.value = parseFloat(e.target.value).toFixed(count);
}
}HTML :
<input type="number" oninput="limitDecimalPlaces(event, 2)" />이것은 AFAIK 할 수 없으며 숫자 입력 으로이 크롬 버그를 방어 합니다.
