Я пытаюсь сделать так, чтобы мое поле ввода SSN выглядело как обычное текстовое поле с уже заполненным XXX-XX и только последними 4 числами, которые можно добавить.

<div>
<label>SSN</label>
<input mask="111-11-1111" type="text" placeholder="123-45-6789" maxlength="11" size="11" value="">
</div>
0
user10290168 11 Сен 2018 в 23:56

1 ответ

Лучший ответ

Слегка взломанный, но вот решение только для CSS без JavaScript.

Сам input содержит только последние 4 цифры, но вы можете щелкнуть в любом месте "поля", чтобы начать ввод (потому что это все label для этого input).

.ssn {
  border: 1px solid #ccc;
  font-family: monospace;
}

.ssn input {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  font: inherit;
  padding: 0;
  outline: 0;
}
<div>
  <label>SSN</label>
  <label class="ssn">XXXX-XX-<input type="text" placeholder="XXXX" maxlength="4" size="4">
  </label>
</div>
0
Jon Uleis 11 Сен 2018 в 21:22