Есть ли способ ограничить количество десятичных символов во входных данных, когда они используются в качестве результирующего поля?

#javascript #input #character #decimal #limit

#javascript #ввод #символ #десятичный #ограничение

Вопрос:

Я создаю простой html, в котором я выполняю вычисления на основе разных входных данных и представляю результаты в других входных данных, используя чистый js.

В приведенном ниже примере, где я разделяю ввод a / b и возвращаю результат на c, допустим, вы вводите 633/33, он возвращает число, подобное этому: 19.18181818181818183

Есть ли способ сделать вид 19.18?

Использование атрибута maxlength для ввода результата не будет работать, поскольку оно ограничивает количество символов, которые вы можете ввести, а не количество символов, которые вы можете отправить.

 <input type="text" id="input1"  style="width: 100px " onkeyup='divide_numbers()'/> 
<label> / </label> 
<input type="text" id="input2"  style="width: 100px " onkeyup='divide_numbers()'/>
 <label> = </label> 
<input type="text" id="result"  style="width: 100px "/>
<script>
function divide_numbers() {
var first_number = parseFloat(document.getElementById("input1").value) ;
var second_number = parseFloat(document.getElementById("input2").value) ;
document.getElementById("result").value=first_number/second_number ;
}
</script>  

Комментарии:

1. document.getElementById("result").value= (first_number/second_number).toFixed(2)

2. (number).toFixed(2) вернет строку ровно с 2 цифрами после десятичной точки (даже если это целое число).

Ответ №1:

Вы можете использовать number.toFixed(2) , который сначала создаст строку с двумя цифрами после десятичной точки, а затем принудительно вернет ее к числу, удалив ненужные десятичные цифры.

 function add_numbers() {
  var first_number = parseFloat(document.getElementById("input1").value) ;
  var second_number = parseFloat(document.getElementById("input2").value) ;
  document.getElementById("result").value =  (first_number/second_number).toFixed(2);
}  
 <input type="text" id="input1"  style="width: 100px " onkeyup='add_numbers()'/> 
<label> / </label> 
<input type="text" id="input2"  style="width: 100px " onkeyup='add_numbers()'/>
 <label> = </label> 
<input type="text" id="result"  style="width: 100px "/>