时间戳

首页 > 解决方案 > 如何更改 Materilaize 输入字段中的数字格式？

css - 如何更改 Materilaize 输入字段中的数字格式？

问题描述

我一直在寻找一种方法来更改 Materialize 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>

标签： cssmaterial-design

解决方案

理性是做不到的type="number"

你需要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>

推荐阅读