1

I'm attempting to create a field that adds dashes to a number so that it takes the form of a telephone number. It adds the dashes, but if the user tries to backspace their way back to the beginning it does not allow the user to delete the dash. Well, it deletes it but then the dash re-populates.

The JavaScript that allows only numbers with exceptions that I'm currently using:

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 that creates the dashes:

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

And the PHP/HTML call (I'm not sure if the right-align may be the cause):

<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>
4

3 回答 3

0

简单更改您的 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;
}

您还可以调整第二种方法以进行不同的格式化，而不必担心字符串长度。例如，您可以将替换函数更改为以 (ddd) ddd-dddd 格式返回

             return (($1) ? '(' + $1 + ') ' : m) + 
                 (($3) ? $3 + '-' : $4) +
                 (($6) ? $6 + '-' : $7);
于 2013-06-20T13:14:25.993 回答
0

这是我将如何做到的。我正在做的一件事是从实际的 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;
    });
});
于 2013-06-20T13:36:39.377 回答
0 
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;
}
于 2013-06-20T13:00:18.050 回答