Question

我有一个输入字段，并且我想对其应用自动斜杠。类似于MM / YY。

例如，如果有人键入MM（05），它将自动添加斜杠以将年份与年份分开，如果有人删除了第二个数字，则应删除斜杠。

是否可以通过CSS？有人可以帮助我吗？

<input type="number">

Answer 1

我不建议您使用此技术。代替这些，使用一些外部库

$("#masked").on("change paste keyup", function() {
  let inputValue = $(this).val();
  if (inputValue.split("/")[0] > 12) {
    $(this).val(12);
  }
});

$("#masked").mask("00/00");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<div id="app">
  <h3>Masked Input Plugin as MM/YY.</h3>
  <table border="0">
    <tbody>
      <tr>
        <td>
          <input id="masked" type="text" value="" placeholder="MM/YY" data-mask="00/00"
            data-mask-clearifnotmatch="true"/>
        </td>
        <td>typing 0221 but getting 02/21</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

<!DOCTYPE HTML>
<html>
<form action="">

  <div>
    <label for="cc">Expiration Date</label>
    <!-- Set via HTML -->
    <input id="cc" type="text" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/(1[5-9]|2\d)" data-valid-example="05/18"/>
  </div>

</form>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/masking-input.js" data-autoinit="true"></script>

</html>

无论如何，有没有掩盖输入字段？

2 个答案: