Размещено: 2023-12-10 22:50:39

Теги: html, js

ФОРМА ВВОДА ДЛЯ ТЕЛЕФОНА

Форма ввода для телефона (phone tel input mask):

<form>
    <input name="phone" type="text" value="+7 9">
    <input type="submit" value="Отправить">
</form>
<script>

document.forms[0].phone.addEventListener("input", function () {
    this.maxLength=16; //максимальная длина телефона
    var val=this.value.replace(/[^\d+]/g, ''), newphone='';
    for(var i=0; i<val.length;  i++)
    {
        if([2,5,8,10].includes(i)) newphone+=' '; //на каких добавлять пробел
        newphone+=val.charAt(i);
    }
    this.value=newphone;
});

</script>

Можно добавить что бы всегда исправляло на +7 9, даже если человек вводит что-то не то

document.forms[0].phone.addEventListener("input", function () {
    this.maxLength=16; //максимальная длина телефона
    var val=this.value.replace(/[^\d+]/g, ''), newphone='';
    for(var i=0; i<val.length;  i++)
    {
        if([2,5,8,10].includes(i)) newphone+=' '; //на каких добавлять пробел

        switch(i){
            case 0:
                newphone+='+';
                break;
            case 1:
                newphone+='7';
                break;
            case 2:
                newphone+='9';
                break;
            default:
                newphone+=val.charAt(i);
        }
    }
    this.value=newphone;
});

На эту страницу чаще всего попадают по запросам: phone, tel, input, mask, ввод телефона, телефон, форма ввода