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来调用它...（提前感谢您的帮助！）

这是小提琴...... 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

Answer 2

在HTML中，请考虑添加属性，以便了解要格式化的字段。

<input value="22" type="text" name="pnumb" data-formatter="phone" />

然后在JavaScript中，您可以选择这些元素并设置处理程序：

$('input[data-formatter="phone"]').each(function (index, element) {
  // Add blur handlers or whatever here.
});

这样，您只需要将该属性添加到标记中，并且您的全局JS负责处理它。更不用说连接每页了。

如何从我的HTML代码中调用此函数调用

2 个答案: