На моем веб-сайте у меня есть текстовое поле, где пользователь вводит GUID из промокода. Я хотел бы автоматически добавлять дефисы к строке, которую пользователь вводит вручную или с помощью копирования / вставки. Это должно быть сделано через jQuery или jQuery, или, может быть, есть решение HTML5?
Я нашел решение для номера кредитной карты, которое не так уж далеко от решения Я ищу. Но, поскольку у меня нет опыта работы с RegEx, я не могу заставить его работать для GUID.
Пользователь @jmp придумал другую идею, которая в целом работает, но выглядит ... не очень хорошо. Потому что, когда вы начинаете вводить свой код, ваше значение выглядит как «123 -----». Было бы неплохо, если бы строка менялась динамически, как в примере 1 (кредитная карта)
Вот что у меня есть:
$('.creditCardText').keyup(function() {
var foo1 = $(this).val().split("-").join(""); // remove hyphens
if (foo1.length > 0) {
foo1 = foo1.match(new RegExp('.{1,4}', 'g')).join("-");
}
$(this).val(foo1);
});
$('.guidText').keyup(function() {
var foo2 = $(this).val().split("-").join(""); // remove hyphens
if (foo2.length > 0) {
foo2 = new String().concat(foo2.substring(0,8), '-', foo2.substring(8,12), '-', foo2.substring(12,16), '-', foo2.substring(16,20), '-', foo2.substring(20,32));
}
$(this).val(foo2);
});
input[type="text"] {
width: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Creditcard pattern:<br />
<input type="text" class="creditCardText" placeholder="1234-5678-1111-0000" maxlength="19"/>
<br/><br/>
GUID Pattern:<br />
<input type="text" class="guidText" placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" maxlength="36"/>
PS: Мне не разрешено использовать внешние плагины или скрипты