用js正确捕捉第10个字符

Question

我正在尝试将输入框中键入的电话号码自动转换为（xxx）xxx-xxxx格式，其中x是某人键入的电话号码。当输入框失去焦点时，我实际上可以使其正常工作，但是我一旦尝试在输入中输入第10个字符，我也会尝试更改它。它可以正常工作，但是直到您单击第11个字符后，我才知道原因。

<input type="tel" class='tel' placeholder="(555) 555-1212" maxlength=10>
<div class="result"></div>

var convert_phone = function () {
    var phone_num = $('.tel').val();
    var phone_check = phone_num.search(/^\(?\d{3}\D*\d{3}\D*\d{4}$/);

    if (phone_check == 0) {
        var parts = phone_num.match(/^\(?(\d{3})\D*(\d{3})\D*(\d{4})$/);
        $('.tel').val('('+parts[1]+') '+parts[2]+'-'+parts[3]);
    }
}

$('.tel').on('keypress', function () {
    var current_val = $(this).val().length;

    $('.result').text(current_val);
    if (current_val == 10) {
        convert_phone();
    }
})

$('.tel').on('blur', function() {
    convert_phone();
})

JSFiddle：https://jsfiddle.net/s6frnp2k/3/ 结果div仅在此处显示点击价值，而最终版本则不需要。