格式化电话号码的文本框输入MVC

Question

我只是使用

@Html.TextBoxFor(m => m.PhoneNumber, new { id = "phoneNo")

我使用正则表达式将其限制为仅 10 个数字。

有没有一种方法可以将文本框格式化为在他们键入时显示为

[phone]

，但在模型中它只会传递 10 个数字，例如

5554443333

？我的意思是自动创建这些括号 - 同时还使用正则表达式检查他们是否输入了 10 个数字？

Answer 1

你可以用 jquery 来做到这一点，正如 Matt 在他的评论中所说，在网站的这个问题中指出： 带有 jQuery 和 Masked 输入插件的电话掩码

或者使用纯 JavaScript，如 xxx 所解释的，也有替代方案： 使用 JavaScript 屏蔽美国电话号码字符串

为名为“phone”的示例输入编码的替代方案列表：

1. 使用纯 JavaScript 的示例代码：

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

2. 使用 jQuery 但未添加任何新依赖项（）的示例代码：

$('#phone', '#example-form')

.keydown(function (e) {
    var key = e.which || e.charCode || e.keyCode || 0;
    $phone = $(this);

    // Don't let them remove the starting '('
    if ($phone.val().length === 1 && (key === 8 || key === 46)) {
        $phone.val('('); 
        return false;
    } 
    // Reset if they highlight and type over first char.
    else if ($phone.val().charAt(0) !== '(') {
        $phone.val('('+$phone.val()); 
    }

    // Auto-format- do not expose the mask as the user begins to type
    if (key !== 8 && key !== 9) {
        if ($phone.val().length === 4) {
            $phone.val($phone.val() + ')');
        }
        if ($phone.val().length === 5) {
            $phone.val($phone.val() + ' ');
        }           
        if ($phone.val().length === 9) {
            $phone.val($phone.val() + '-');
        }
    }

    // Allow numeric (and tab, backspace, delete) keys only
    return (key == 8 || 
            key == 9 ||
            key == 46 ||
            (key >= 48 && key <= 57) ||
            (key >= 96 && key <= 105)); 
})

.bind('focus click', function () {
    $phone = $(this);

    if ($phone.val().length === 0) {
        $phone.val('(');
    }
    else {
        var val = $phone.val();
        $phone.val('').val(val); // Ensure cursor remains at the end
    }
})

.blur(function () {
    $phone = $(this);

    if ($phone.val() === '(') {
        $phone.val('');
    }
});

3. 使用 Masked 输入插件的 jQuery 示例代码：

$("#phone").mask("(99) 9999?9-9999");

$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});