退格键不会删除破折号

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;
}

创建破折号的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

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 2

在您的html中进行简单的更改，我更改了此行以添加事件信息：

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

在addDashes函数中，我更改了签名以接收事件，并添加了if来处理退格键

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);
}

addDashes的另一个变体，它避免了使用笨拙的正则表达式的条件。

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;
}

您也可以调整第二种方法以执行不同的格式设置，而不必担心字符串长度。 例如，您可以将replace函数更改为以（ddd）ddd-dddd格式返回

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

Answer 3

这就是我要怎么做。 我正在做的一件事是从实际的dom元素中删除javascript。 因此，您的输入应如下所示：

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

更新：由于我注意到您有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;
    });
});