代码之家  ›  专栏  ›  技术社区  ›  Leo Messi

限制文本输入中小数后的位数

  •  1
  • Leo Messi  · 技术社区  · 7 年前

    有一个 similar question 它限制表单输入中允许的字符数。

    在我的例子中,我想将小数点后可以添加的位数限制为2位。

    <input type="text" maxlength="2"/>
    

    有办法限制小数点后的位数吗( . )?

    3 回复  |  直到 7 年前
        1
  •  2
  •   Takit Isy Surendra    7 年前

    因为我不知道用html做这件事的方法
    下面是我将如何使用一些javascript,使用regex删除额外的小数:

    var myInput = document.querySelector('#fixed2');
    myInput.addEventListener("keyup", function(){
      myInput.value = myInput.value.replace(/(\.\d{2})\d+/g, '$1');
    });
    <input id="fixed2" type="text" />

    注意我用了 keyup 事件,以便您可以看到自动删除。但它很适合 input 也!


    阿西 阿西 阿西

    我们可以使用一个自定义属性,如 decimals :
    (我正在使用) 输入 这里是事件,所以你看到了区别)

    var myInputs = document.querySelectorAll('.fixed');
    myInputs.forEach(function(elem) {
      elem.addEventListener("input", function() {
        var dec = elem.getAttribute('decimals');
        var regex = new RegExp("(\\.\\d{" + dec + "})\\d+", "g");
        elem.value = elem.value.replace(regex, '$1');
      });
    });
    <input class="fixed" type="text" decimals="2" placeholder="2 decimals only" />
    <br><br>
    <input class="fixed" type="text" decimals="3" placeholder="3 decimals only" />

    希望有帮助。

        2
  •  0
  •   Aljaz    7 年前

    我认为最好的选择是用jquery validator解决这个问题,在这里您可以为正在使用的每个字段添加需求。如果你试图用HTML5来解决这个问题,那么在某些浏览器中,它可能无法以你想要的方式工作。

    选中此项--> https://jqueryvalidation.org/

    ---GT; https://jqueryvalidation.org/maxlength-method/

        3
  •  0
  •   K K    7 年前

    如果您习惯使用脚本,则可以尝试以下方法:

    $(document).ready(function() {
      $("input").on("blur", function() {
        $(this).val(parseFloat($(this).val()).toFixed(2));
      })
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="number" step="0.01" min="0" />