在 HTML 中创建货币输入

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

在 HTML 中创建货币输入

作者：迹忆客最近更新：2023/05/05 浏览次数：

在本文中，用户将学习将普通的 HTML <input> 字段转换为货币输入字段。我们将使用 HTML 和 jQuery 来实现我们的目标。

使用 JavaScript toFixed() 方法将普通 `<input>` 转换为 HTML 中的货币输入

在 HTML 中，有一个普通的 <input> 元素，我们可以根据需要设置它的类型。我们不能通过将类型设置为数字来使类型成为货币输入；我们需要使用 JavaScript 或 jQuery 进行更多更改。

例如，我们可以在 HTML 中创建 <input> 字段，如下所示；它包含一些属性。 type 属性表示它接受的输入类型。

min 和 max 属性分别表示它所采用的最小和最大数值。 id 属性是 <input> 元素的唯一 ID，我们可以使用它访问 jQuery 中的元素。

<input type="number" id="currencyInput" min="0.1" max="5000000.0" value="99.9" />

我们将使用 jQuery 将上面的 <input> 字段转换为货币输入。我们创建了匿名函数并将其存储在 inovkeCurrencyInput 变量中。

用户可以在下面看到我们如何在 jQuery 中创建匿名函数。

$.fn.inovkeCurrencyInput = function () {
    // function code
}

现在，我们将使用 jQuery 在函数内的输入元素上添加更改事件侦听器。每当我们在数字输入中键入内容时，它将帮助我们检测变化。

下面是在 invokeCurrencyInput() 函数中添加 change 事件侦听器的 jQuery 代码。

$(this).change(function () {

});

之后，每当用户从数字输入中添加或删除某些内容时，我们将使用 valueAsNumber 属性访问数字输入的值。此外，我们将使用 attr() 方法访问输入字段的 min 和 max 属性。

访问 min 和 max 属性后，我们将使用 parseFloat() JavaScript 方法从中解析浮点值，如下所示。

var currencyvalue = this.valueAsNumber;
var maxValue = parseFloat($(this).attr("max"));
var minValue = parseFloat($(this).attr("min"));

现在，我们有了货币输入字段可以接受的最小值和最大值。此外，我们将输入字段的当前值存储在 currencyValue 变量中。

使用 if 语句，我们将检查 currencyValue 是否在 minValue 和 maxValue 之间。

if (currencyvalue > maxValue){
    currencyvalue = maxValue;
}
if (currencyvalue < minValue){
    currencyvalue = minValue;
}

我们将使用 number.toFixed(precision) 方法将 currencyValue 舍入到特定精度。在我们的例子中，精度值为 1，因此每当用户输入精度大于 1 的输入值时，输入字段会自动向上舍入数字值并设置单精度。

在这里，我们展示了如何使用 number.toFixed() 方法。此外，我们将最终格式化的 currencyValue 设置为 <input> 元素的值。

currencyvalue = currencyvalue.toFixed(1);
$(this).val(currencyvalue);

最后，我们将在文档加载的任何位置调用 <input> 元素上的 invokeCurrencyInput() 函数。在这里，我们使用其 id 访问 <input> 元素。

$(document).ready(function () {
   $("input#currencyInput").inovkeCurrencyInput();
});

完整的源代码- HTML + jQuery：

我们还在下面的示例代码中添加了 jQuery CDN。用户必须添加它才能使用 HTML 代码调用 jQuery。

<html>
  <body>
    $
    <input
      type="number"
      id="currencyInput"
      min="0.1"
      max="5000000.0"
      value="99.9"
    />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"
      integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      $.fn.inovkeCurrencyInput = function () {
        $(this).change(function () {
          var currencyvalue = this.valueAsNumber;
          var maxValue = parseFloat($(this).attr("max"));
          if (currencyvalue > maxValue) currencyvalue = maxValue;
          var minValue = parseFloat($(this).attr("min"));
          if (currencyvalue < minValue) currencyvalue = minValue;
          currencyvalue = currencyvalue.toFixed(1);
          $(this).val(currencyvalue);
        });
      };
      $(document).ready(function () {
        $("input#currencyInput").inovkeCurrencyInput();
      });
    </script>
  </body>
</html>

该代码最初将在输入字段中显示 99.9 值。如果用户输入的值在0.1和5000000.0之外，它会相应地设置0.1和5000000.0的值；否则，我们的代码会将值向上或向下舍入为单个精度数字并将其显示在输入字段中。

用户需要按回车键提交和四舍五入该值。

这样，我们就可以将普通输入字段转换为货币输入字段，货币输入字段有最小值和最大值限制，并且用户可以输入一些精度数字的值。

上一篇：将 HTML 转换为 JSON

下一篇：在 HTML 日期选择器中更改格式

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享