Почему возникает ошибка в работе виртуальной клавиши BackSpace?

Question

[Valeriy1997]

Возникает ошибка в роботе виртуальной клавиши которая должна удалять по одном символу при нажатии

вот код клавиши :

$(document).ready(function() {

     function del() {

         function del() {

             var str = document.getElementById('phone').val;

             document.getElementById('phone').val = str.substring(0, str.length - 1);

         }

     }

 });

Вот полный код : jsfiddle.net/0xL0fctq/60

Answer 1

[OlegTar]

рабочий код здесь: https://jsfiddle.net/0xL0fctq/89/

но я закоментил строку $("#phone").mask(mask, {placeholder: "_", autoclear: false}); так как она не работала

В настройках фидлера нужно было НЕ выбирать onLoad, а просто No-wrap in head или No-wrap in body

Код html не видел функцию del.
Но этого недостаточно.

$(document).ready(function() {

     function del() {

         function del() {

             var str = document.getElementById('phone').val;

             document.getElementById('phone').val = str.substring(0, str.length - 1);

         }

     }

 });

Тут во-первых верхняя функция del будет видна только внутри function() {},
но она ничего делать не будет, а просто внутри себя определять ещё одну функцию del

Так что функцию del надо написать так:

function del() {
   var str = document.getElementById('phone').val;
   document.getElementById('phone').val = str.substring(0, str.length - 1);
}

и вытащить на самый верх, чтобы из html её можно было вызывать.

Но не
document.getElementById('phone').val;,
а
document.getElementById('phone').value;

и вообще если мы юзаем Jquery, то можно так:

var str = $('#phone).val();
$('#phone').val(str.substring(0, str.length - 1));

И там ещё скрипт один не подгружается, и валил скрипт. Я его отключил.
Он не подключался так как фиддлер открывается по https, а скрипт подключался по http.

Comments

[OlegTar]

если страница будет на http, то можно будет этот скрипт подключить, и строчку с mask расскоментить.

[Valeriy1997]

OlegTar: Спасибо, сделал как вы и сказали всё работает только теперь получается , что мы удаляем и маску с инпута, а не подскажите как сделать чтоб удалялся сам только номер , а маска не трогалась

[OlegTar]

Valeriy1997 не понял, что вы имеете в виду, что за маска?

[Valeriy1997]

OlegTar: маска для форматирования номера . Вот гляньте если несложно. https://jsfiddle.net/0xL0fctq/98/

[OlegTar]

Valeriy1997: Ну тут надо куда-то отдельно сохранять вбиваемые цифры и работать отдельно с этим местом, и не трогать value инпута.
Я для этого придумал новое свойство phone_value
также мне пришлось вызвать из del checkValid, а для этого пришлось вынести наверх checkValid и структуру codes
https://jsfiddle.net/0xL0fctq/102/

[Valeriy1997]

OlegTar: Спасибо большое , Вы гуру яваскрипта и всия кода )