javascript - 如何将此函数调用移出我的 HTML 代码

Question

我正在尝试将使用内联事件处理程序的 JavaScript 函数更改为采用更现代方法的函数。我想从实际的 HTML 标记中删除丑陋的事件处理程序，并将其放入模块化的外部 javascript 文件中。这是测试用例:

这是当前的代码(就功能而言工作正常

function formatPhone(obj) {
   var numbers = obj.value.replace(/\D/g, ''),
       char = {0:'(',3:') ',6:' - '};
   obj.value = '';
   for (var i = 0; i < numbers.length; i++) {
       obj.value += (char[i]||'') + numbers[i];
   }
}

<小时/>

我想要完成的是这样的事情:

var TargetEl = $('[name="pnumb"]');
TargetEl.on('blur', function() {
var UserInput = $('[name="pnumb"]').value.replace(/\D/g, ''),
char = {0:'(',3:') ',6:' - '};
TargetEl.value = '';

for (var i = 0; i < UserInput.length; i++) {
    TargetEl.value += (char[i]||'') + numbers[i];
}

我的主要重点是删除内联js和onblur =“”事件处理程序。我还希望在目标El模糊后格式化电话号码。最后，我希望通过简单地分配一个 .pnumbFormat 类来调用它...(提前感谢您的帮助!)

这是 fiddle ... http://jsfiddle.net/UberNerd/ae4fk/

Answer 1

修改您的函数以接受字符串并返回字符串。

function formatPhone(value) {
    var numbers = value.replace(/\D/g, ''),
        char = {
            0: '(',
            3: ') ',
            6: ' - '
        };
    value = '';
    for (var i = 0; i < numbers.length; i++) {
        value += (char[i] || '') + numbers[i];
    }
    return value;
}

var TargetEl = $('[name="pnumb"]');
TargetEl.on('blur', function () {
    $(this).val(formatPhone($(this).val()))
});

DEMO

<小时/>

更好

感谢@KevinB 出色的即兴创作。

function formatPhone(_,value) {
    var numbers = value.replace(/\D/g, ''),
        char = {
            0: '(',
            3: ') ',
            6: ' - '
        };
    value = '';
    for (var i = 0; i < numbers.length; i++) {
        value += (char[i] || '') + numbers[i];
    }
    return value;
}

var TargetEl = $('[name="pnumb"]');
TargetEl.on('blur', function () {
    $(this).val(formatPhone)
});

DEMO