【问题标题】:How to Change then Number format in Materilaize input field?如何更改 Materialise 输入字段中的数字格式?
【发布时间】:2020-10-07 08:58:25
【问题描述】:

我一直在寻找如何在 Materialise CSS 中更改输入数字格式的方法,但到目前为止还没有找到。有没有办法可以更改输入数字格式?

<div class="row" >
        <div class="input-field col offset-s4 s4">
          <input id="price" type="number" class="validate"  >
          <label for="price">Price</label>
        </div></div>
        <div class="row">
        <div class="input-field col offset-s4 s4 ">
          <input id="DownPay" type="number" class="validate" >
          <label for="DownPay">Down Payment</label>

【问题讨论】:

    标签: css material-design


    【解决方案1】:

    type="number"Reason做不到

    你需要 type=text 和一些 JS

    document.getElementById('Price').addEventListener('input', event =>
      event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
    );
     <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
                
    
    <div class="input-wrap">
    <div class="input-field col s6">
              <input id="Price" type="text" id="" pattern="^[\d,]+$" class="validate">
              <label for="Price">Price</label>
            </div>
     
    </div>

    【讨论】:

    • 它不起作用,我正在使用materializecss.com 你的代码可以使用它吗?
    • 它适用于您使用的所有库,我已经用 materializecss 更新了我的答案
    • 即使我已经完成了您指示的更改,我仍然遇到问题,您能否检查我的工作是否正确?这是我的链接script.google.com/d/…
    • @MuhammedAadhil 只需创建代码的工作示例,就像我在上面的 sn-p 中所做的那样。
    • 我已经完全按照你说的做了,但我仍然不知道我哪里出错了:(
    猜你喜欢
    • 1970-01-01
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 2020-09-07
    • 2018-09-29
    • 2019-07-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多