在 html 中创建货币输入-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > web前端 > html >

vue react javascript angular css html

在 html 中创建货币输入

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

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

使用 javascript tofixed() 方法将普通转换为 html 中的货币输入

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

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

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

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

我们将使用 jquery 将上面的字段转换为货币输入。我们创建了匿名函数并将其存储在 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 设置为元素的值。

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

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

$(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 日期选择器中更改格式

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

本文地址：

发布时间：2023/05/06 浏览次数：218 分类：html

本篇文章介绍了如何在 html 中制作只读复选框。本文是关于如何使 html 复选框控件成为只读组件的快速破解。但是，首先，让我们简要介绍一下复选框控件。

在 html 中创建货币输入-ag捕鱼王app官网