时间戳

首页 > 解决方案 > 转换表单编号字段值结构

javascript - 转换表单编号字段值结构

问题描述

在网页中，我要求用户输入一个名为“预算”的字段。我尝试使用下面的脚本为输入的数字创建千位分隔符：

window.onload = function() {
  document.getElementById("project-budget").onblur = function() {
    this.value = parseFloat(this.value.replace(/,/g, ""))
      .toFixed(0)
      .toString()
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById("display").value = this.value.replace(/,/g, "")
  }
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" class="test input-item text-field is_number numberVal" name="et_budget" min="1">

它完美地改变了值，但问题在于将字段值设为文本会导致 cms 无法理解该字段中的值。所以我需要将值更改回隐藏字段中的简单数字，并使用该隐藏字段将值插入数据库。我怎样才能把值改回来？例如用户输入1000000并且脚本将其更改为1,000,000. 我想1000000在隐藏字段中打印。

标签： javascripthtmlforms

解决方案

这可能会有所帮助。

function parseBudget(element) {
  const value = parseFloat(element.value.replace(/,/g, ''));
  console.log(value);
  element.value = value.toFixed(0)
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  document.querySelector("#forCms").value = value;
}
<input id="project-budget" step="5" required type="text" pattern="[0-9]*" onblur="parseBudget(this)" class="test input-item text-field is_number numberVal" name="et_budget" min="1">
<input type="number" id="forCms">

推荐阅读