如何將此函數調用從我的HTML代碼中移出

我正嘗試將使用內聯事件處理程序的JavaScript函數更改爲使用更現代的方法之一。我想從實際的HTML標記中刪除醜陋的事件處理程序，並將其放入模塊化的外部JavaScript文件中。下面是測試情況：如何將此函數調用從我的HTML代碼中移出

下面是當前代碼（精就功能而言

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模糊後將電話號碼格式化。最後，我希望通過簡單地分配類o ˚F說.pnumbFormat ...（在此先感謝您的幫助SO！）

這裏是小提琴... http://jsfiddle.net/UberNerd/ae4fk/

來源

2014-02-07 user3062514

修改你的函數接受字符串，返回字符串。

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

來源

2014-02-07 20:00:32 Satpal

你可以通過將'formatPhone'變成可以通過引用直接傳遞給.val的東西來簡化它。 http://pastebin.com/DayRNzGv和'$（this）.val（formatPhone）' –

您的編輯，如果您在'value'之前向'formatPhone'添加另一個參數，則可以直接將它傳遞給'.val'。 http://jsfiddle.net/ae4fk/4/ –

@KevinB，偉大的即興創作。它的誘惑添加它來回答 – Satpal

在你的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照顧的。更不用說連接每個頁面。

來源

2014-02-07 20:03:47 Brad

如何將此函數調用從我的HTML代碼中移出

回答

相關問題