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

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

退格键不会删除短划线

3 个答案: