Поле для ввода номера телефона на чистом JS

900

22 марта 2017, 18:01

Здравствуйте, хочу сделать поле для ввода номера телефона, при нажатии на поле появлялся +, как первый знак, после чего можно было ввести еще 12 чисел, и нельзя писать числа перед плюсом и удалять плюс, код на чистом(ванильном) JS, через .mask нашел (Как в поле ввода номера задать регулярное выражение для укр. телефона со статическими +380 ....?), но ради одного кода не хочу подключать библиотеку...

<form action="">
        <input type="text" name="tel"  placeholder="Номер телефона" required max="13" id="tel">
    </form>

Answer 1

Ну... Валидация формата может быть весьма нетривиальной задачей, так что, возможно, отдельный плагин, вылизанный кучей народа, может быть весьма кстати.

let inp = document.querySelector('#tel'); 
 
// Проверяем фокус 
inp.addEventListener('focus', _ => { 
  // Если там ничего нет или есть, но левое 
  if(!/^\+\d*$/.test(inp.value)) 
    // То вставляем знак плюса как значение 
    inp.value = '+'; 
}); 
 
inp.addEventListener('keypress', e => { 
  // Отменяем ввод не цифр 
  if(!/\d/.test(e.key)) 
    e.preventDefault(); 
});

input:focus{outline: none;}

<form action=""> 
  <!-- Ограничение на длину: maxlength --> 
  <input type="text" name="tel" placeholder="Номер телефона" required maxlength="13" id="tel"> 
</form>

Answer 2

var inp = document.getElementById("inp"); 
 
inp.onclick = function() { 
    inp.value = "+"; 
} 
 
var old = 0; 
 
inp.onkeydown = function() { 
    var curLen = inp.value.length; 
     
    if (curLen < old){ 
      old--; 
      return; 
      } 
     
    if (curLen == 2)  
    	inp.value = inp.value + "("; 
       
    if (curLen == 6) 
    	inp.value = inp.value + ")-"; 
       
     if (curLen == 11) 
    	inp.value = inp.value + "-";  
       
     if (curLen == 14) 
    	inp.value = inp.value + "-";   
       
     if (curLen > 16) 
    	inp.value = inp.value.substring(0, inp.value.length - 1); 
       
     old++; 
}