如何在表单中显示四舍五入的值并集中显示原始值？

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>

表单输入值应该是“3.14”，如果用户点击该字段，显示的值应该是3.14159265359。

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

因为这是一个没有互联网连接保证的本地 1 页网站，所以在没有外部脚本 (jquery ...) 的情况下执行此操作将是一种资产但不是必需的。

Answer 1

您可以使用焦点和模糊事件来屏蔽/取消屏蔽浮动，然后只需将原始值存储在数据参数中，这样您就可以对表单中的所有输入使用相同的函数；)

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

这是解决方案，我使用了焦点和模糊侦听器，而没有使用 jQuery。 我向 input 添加了一个名为 realData

的属性

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/

Answer 5

其实你的代码有一些问题需要修复：

• 您正在使用var x =... 重新声明myFunction 函数中的x 变量，您只需要引用已经声明的x 而不使用var 关键字。
• 不要在myFunction 中使用document.getElementById()，而是将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);
}

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