Backspace не удаляет тире

Question

Я пытаюсь создать поле, которое добавляет тире к числу, так что оно принимает форму номера телефона. Он добавляет тире, но если пользователь пытается вернуться обратно к началу, он не позволяет пользователю удалять тире. Ну, он удаляет его, но затем тире повторно заполняется.

JavaScript, который позволяет только номера с исключениями, которые я в настоящее время с помощью:

function forceNumber(e) { 
    var keyCode = e.keyCode ? e.keyCode : e.which; 
    if((keyCode < 48 || keyCode > 58) && keyCode != 8 && keyCode != 188 && keyCode != 189) { 
     return false; 
    } 
    return true; 
} 

The JS, которая создает черточки:

function addDashes(n){ 
    n = n.replace(/,/g, ""); 
    var s=n.split('.')[1]; 
    (s) ? s="."+s : s=""; 
    n=n.split('.')[0]; 
    if(n.length == 3 || n.length == 7 || n.length == 13){ 
     s="-" 
    } 
    return n+s; 
} 

И PHP/HTML вызовов (Я не уверен, что если право выравнивания может быть причиной):

<p id="phone_number"> 
    <label for="phone_number"><?php _e('Phone Number','mydomain') ?><br /> 
     <input type="text" name="phone_number" id="phone_number" class="input" size="25" style="text-align:right" onkeypress="return forceNumber(event);" onkeyup="this.value=addDashes(this.value);"/> 
</p> 

Answer 1

Простое изменение в вашем HTML Я изменил эту строку, чтобы добавить информацию о событии:

<input ... onkeyup="this.value=addDashes(this.value, event);"/> 

в функции addDashes я изменил подпись принять событие и добавил, если обрабатывать забой

function addDashes(n, ev){ 
    // ... 
} 

Однако я заметил более фундаментальную проблему с вашим методом. Если кто-то вставляет символ, он нарушит логику. Так что если текст 123-45, и я вставляю число 6 между 2 & 3, результатом будет 1263-45.

Вот еще один подход к addDashes, который просто проверяет всю строку каждый раз.

function addDashes(n, ev){ 
    n = n.replace(/[^\d]/g, ""); 
    if (n.length > 3) { 
     n = insert(n, 3, '-'); 
     if (n.length > 7) { 
      n = insert(n, 7, '-'); 
      if (n.length > 13) { 
       n = insert(n, 13, '-'); 
      } 
     } 
    } 
    return n; 
} 

function insert(s1, index, s2) { 
    return s1.substring(0, index) + s2 + s1.substring(index); 
} 

Другие варианты дополнений, которые позволяют избежать условностей в пользу неуправляемого регулярного выражения.

function addDashes(n, ev){ 
    n = n.replace(/[^\d]/g, "") 
     .replace(/(\d{3}(?=\d))((\d{3}(?=\d))|(\d{0,3}$))((\d{4}(?=\d))|(\d{0,4}$))/, 
     function(m, $1, $2, $3, $4, $5, $6, $7) { 
      return (($1) ? $1 + '-' : m) + 
       (($3) ? $3 + '-' : $4) + 
       (($6) ? $6 + '-' : $7); 
     }); 
    return n; 
} 

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

   return (($1) ? '(' + $1 + ') ' : m) + 
       (($3) ? $3 + '-' : $4) + 
       (($6) ? $6 + '-' : $7); 

Answer 2

if(n.length == 3 || n.length == 7 || n.length == 13){ 
    s="-" 
} 

Когда вы перешагиваете тире, длина равна 3, поэтому черта добавляется. Вы будете иметь, чтобы проверить, если последний ключ пользователь нажал в забой, как

var lastKeyIsBackspace; 
if(!lastKeyIsBackspace && (n.length == 3 || n.length == 7 || n.length == 13)){ 
    s="-"; 
} 

Затем проверьте, если ключ был забой в вашей ключевой обработчик:

function forceNumber(e) { 
    var keyCode = e.keyCode ? e.keyCode : e.which; 
    if((keyCode < 48 || keyCode > 58) && keyCode != 8 && keyCode != 188 && keyCode != 189) { 
     return false; 
    } 
    // check if the key was backspace (key code 8) 
    if (keyCode == 8) lastKeyIsBackspace = true; 
    else lasyKeyIsBackspace = false; 
    return true; 
} 

Answer 3

Вот как я бы это сделать. Одна вещь, которую я делаю, - удалить javascript из фактических элементов dom. Таким образом, ваш вклад будет выглядеть следующим образом:

<input type="text" name="phone_number" id="phone_number" class="input" size="25" style="text-align:right" /> 

UPDATE: так как я заметил, вы JQuery источников, и вы предпочитаете черточки, чтобы показать, до 4-го и 7-й цифры набираются.следующее должно быть хорошо для вас:

http://jsfiddle.net/3e9XE/8/

$(document).ready(function() { 
    $("#phone_number").on("keypress", function (e) { 
     var keyCode = e.keyCode ? e.keyCode : e.which; 
     if ((keyCode < 48 || keyCode > 58) && keyCode != 8 && keyCode != 188 && keyCode != 189) { 
      e.preventDefault(); 
     } 
    }) 
    .on("keyup", function (e) { 
     var str = this.value; 
     if (e.keyCode == 8) { 
      if ("-" == str.charAt(str.length - 1)) { 
       str = str.substring(0, str.length - 1); 
      } 
     } else { 
      str = str.replace(/\D/g, '') 
       .replace(/(\d{3})(.*)/, "$1-$2") 
       .replace(/(\d{3}-\d{3})(.*)/, "$1-$2"); 
     } 
     this.value = str; 
    }); 
});