Есть ли способ маскировать поле ввода? - PullRequest
Новая
       6

Есть ли способ маскировать поле ввода?

0 голосов
/ 18 октября 2019

У меня есть поле ввода, и я хочу применить к нему автоматическую косую черту. Что-то вроде MM / YY.

Например, если кто-то набирает MM (05), он должен автоматически добавлять косую черту, чтобы отделить месяц от года, а если кто-то удалит второе число, косая черта должна быть удалена.

Возможно ли это через CSS? Может кто-нибудь помочь мне с этим? 

<input type="number">

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Я не рекомендую вам использовать эту технику. Вместо них используйте некоторые внешние библиотеки 

$("#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>
0 голосов
/ 18 октября 2019 
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...