Как разрешить некоторые символы у input type NUMBER?

Question

[Cоломон Геннадьевич]

Допустим есть форма input type number. Она по дефолту запрещает ввод всего кроме цифр и на мобилах удобно -появляется только циферная клавиатура.

Можно ли как-то реализовать чтобы можно скобки ( ), плюсы+, пробелы вводить? И при этом чтобы на сотках появлялась только циферная клавиатура. Спасибо

Answer 1

[vintage]

Тут по надо использовать type=tel htmlbook.ru/samhtml5/formy/pole-dlya-telefona

Answer 2

[Александр Аксентьев]

<input type="text" pattern="[0-9]*" />

Comments

[Cоломон Геннадьевич]

но тогда на сотках не будет цифровой клавиатуры, а будет обычная QWERTY.....

[Александр Аксентьев]

Cоломон Геннадьевич: это как раз так чтобы показывало цифровую. number не рабатет с масками ввода никак

[Константин Китманов]

Не показывает цифровую клаву, вот пруф: codepen.io/hogart/pen/rjBMVG

Answer 3

[Дмитрий Аргус Мобайл]

Простой код на чистом js, с добавлением скобок и " - ".
Если надо менять регион (+7), добавьте ее в переменную.

<input id="input_certif_user_phone" type="tel" placeholder="Телефон" onkeyup="phone_Function_certif()">

function phone_Function_certif() {

  var ph_num = document.getElementById('input_certif_user_phone');

  var ph_val = ph_num.value;
  var ph_lenght = ph_num.value.length;
  var current_value;

  if (ph_lenght === 1){
    document.getElementById('input_certif_user_phone').value = '+7 (' + ph_val;
  }

  if (ph_lenght === 4){
    document.getElementById('input_certif_user_phone').value = '';
  }

  if (ph_lenght === 7){
    current_value =  ph_val + ') ';
    document.getElementById('input_certif_user_phone').value = current_value;
  }
  if (ph_lenght === 8){
    current_value =  ph_val.substring(0, ph_val.length-2);
    document.getElementById('input_certif_user_phone').value = current_value;
  }
  if (ph_lenght === 12){
    current_value =  ph_val + ' - ';
    document.getElementById('input_certif_user_phone').value = current_value;
  }

  if (ph_lenght === 14){
    current_value =  ph_val.substring(0, ph_val.length-3);
    document.getElementById('input_certif_user_phone').value = current_value;
  }

  if (ph_lenght === 17) {
    current_value = ph_val + ' - ';
    document.getElementById('input_certif_user_phone').value = current_value;
  }


  if (ph_lenght === 19){
    current_value =  ph_val.substring(0, ph_val.length-3);
    document.getElementById('input_certif_user_phone').value = current_value;
  }

  if (ph_lenght > 22){
    current_value =  ph_val.substring(0, ph_val.length-1);
    document.getElementById('input_certif_user_phone').value = current_value;
  }
}