Question

我的数字值有很多小数位，其他函数需要精度。我想在表单中显示值，因此用户可以根据需要更改值。为了提高可读性，我希望将值四舍五入显示为2位小数，但如果用户单击输入字段，则应显示完整值。通过这样做，用户可以看到真实值并更好地调整它们。

实施例： HTML

<button id="myBtn" onclick="fillForm()">Try it</button>
<form id="myForm" >
 <fieldset>
  <input type="text" id="myInput1" onchange="myFunction()" >
 </fieldset>      
</form>

JavasSript

<script>
 //Example values that should be presented
 var x = 3.14159265359;

 function fillForm(){
  document.getElementbyId("myInput1").value = x;
 }
 function myFunction(){
  x = document.getElementbyId("myInput1");
 }
</script>

表单输入值应为＆＃34; 3.14＆＃34;如果用户在字段中单击，则显示的值应为3.14159265359。

现在用户可以更改值，并且必须保存新值。

因为这是针对本地1页网站而不保证互联网连接的，所以没有外部脚本（jquery ......）就可以了，但这不是必需的。

Answer 1

你可以使用focus和blur事件来掩盖/取消屏蔽浮动，然后只需将原始值存储在数据参数中，这样就可以对表单中的所有输入使用相同的函数;）

function fillForm(inputId, val)
{
  var element = document.querySelector('#'+inputId); 
  element.value = val; 
  mask(element); 
}

function mask(element) {
 element.setAttribute('data-unmasked',element.value);
 element.value = parseFloat(element.value).toFixed(2);
 }
 
 function unmask(element) {
 element.value = element.getAttribute('data-unmasked') || '';
 }

<button onclick="fillForm('myInput1',3.156788)">Fill!</button>
<form id="myForm" >
 <fieldset>
  <input type="text" id="myInput1" onblur="mask(this)" onfocus="unmask(this)" >
 </fieldset>      
</form>

编辑：添加“fillForm（）”：）

Answer 2

只需使用.toFixed()即可。它接受一个参数，一个整数，并显示多个小数点。由于Javascript原语是不可变的，因此x变量将保持相同的值。（在获取/设置输入值时也使用.value属性

 function fillForm(){
  document.getElementbyId("myInput1").value = x.toFixed(2);
 }

如果您需要保存，可以将其存储为新值

var displayX = x.toFixed(2)

Answer 3

这是我的解决方案。我希望你有其他建议。

HTML

<form id="myForm" >
 <fieldset> 
  <input type="text" id="myInput1" >
 </fieldset>       
</form>

<button id="myBtn" onclick="fill_form()">fill form</button>

JavasSript

 <script>
 var apple_pi = 10.574148541;
 var id_form = document.getElementById("myForm");

 //Event listener for form
 id _form.addEventListener("focus", copy_input_placeh_to_val, true);
 id _form.addEventListener("blur", round_input_2decimal, true);
 id _form.addEventListener("change", copy_input_val_to_placeh, true);

 // Replace input value with input placeholder value
 function copy_input_placeh_to_val(event) {
  event.target.value = event.target.placeholder; 
 }

 // Rounds calling elemet value to 2 decimal places
 function round_input_2decimal(event) {
  var val = event.target.value
 event.target.value = Number(val).toFixed(2);
 }

// Replace input placeholder value with input value
function copy_input_val_to_placeh(event) {
 event.target.placeholder = event.target.value;
}

// Fills input elements with value and placeholder value. 
// While call of function input_id_str has to be a string ->      
//fill_input_val_placeh("id", value) ;
function fill_input_val_placeh (input_id_str, val) {
 var element_id = document.getElementById(input_id_str);
 element_id.placeholder = val;
 element_id.value = val.toFixed(2);
}

// Writes a value to a form input
function fill_form(){
 fill_input_val_placeh("myInput1", apple_pi);
}
</script>

这是一个正在运行的例子 https://www.w3schools.com/code/tryit.asp?filename=FLDAGSRT113G

Answer 4

实际上，您的代码中存在一些需要修复的问题：

您正在使用SELECT order.id,order.item, CASE WHEN scheduled_arrival_date >= actual_arrival_date THEN 'late' WHEN scheduled_arrival_date <= actual_arrival_date THEN 'Early' END as delivered FROM order重新声明x函数中的myFunction变量，只需引用已声明的var x =...而不使用x关键字。
不要在var中使用document.getElementById()，而是将myFunction作为this中的参数传递，并在onchange="myFunction(this)"中获取其值。
使用function解析输入值到浮点数，然后使用parseFloat()将其显示为.toFixed(2)。

这是工作代码：

3.14

要在var x = 3.14159265359; function fillForm() { document.getElementById("myInput1").value = x.toFixed(2); } function myFunction(input) { x = parseFloat(input.value); }点击需要使用input事件时显示原始数字，请查看演示。

<强>演示：

onfocus

var x = 3.14159265359;

function fillForm() {
  document.getElementById("myInput1").value = x.toFixed(2);
}

function focusIt(input){
    input.value = x;
}

function myFunction(input) {
  x = parseFloat(input.value);
}

Answer 5

这是解决方案，我使用焦点和模糊监听器而不使用jQuery。我在名为 realData

的input中添加了一个属性

document.getElementById("myInput1").addEventListener("focus", function() {
  var realData = document.getElementById("myInput1").getAttribute("realData");
  document.getElementById("myInput1").value = realData;
});

document.getElementById("myInput1").addEventListener("blur", function() {
  var realData = Number(document.getElementById("myInput1").getAttribute("realData"));
  document.getElementById("myInput1").value = realData.toFixed(2);
});

function fillForm(value) {
  document.getElementById("myInput1").value = value.toFixed(2);
  document.getElementById("myInput1").setAttribute("realData", value);
}
 
var x = 3.14159265359;

fillForm(x);

<button id="myBtn" onclick="fillForm()">Try it</button>
<form id="myForm" >
 <fieldset>
  <input type="text" id="myInput1" realData="" onchange="myFunction()" >
 </fieldset>      
</form>

jsfiddle：https://jsfiddle.net/mns0gp6L/1/

如何在表单中显示舍入值并在焦点上显示原始值？

5 个答案: