내 HTML 코드에서이 함수 호출을 이동하는 방법

Question

인라인 이벤트 처리기를 사용하는 자바 스크립트 함수를보다 현대적인 접근 방식으로 변경하려고합니다. 추악한 이벤트 처리기를 실제 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 = ""이벤트 처리기를 제거하는 것입니다. 타겟 엘이 흐려진 후에 전화 번호를 형식화하고 싶습니다. 마지막으로 간단히 클래스 o를 지정하여이 호출을 원합니다. F .pnumbFormat 말 ... (SO 당신의 도움에 미리 감사를!) 여기에

이 바이올린입니다 ...

Answer 1

http://jsfiddle.net/UberNerd/ae4fk/ 문자열을 받아 문자열을 반환하는 함수를 수정합니다.

---

위대한 즉흥에 대한

감사 @KevinB 더 나은

DEMO

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())) 
}); 

. 당신의 HTML에서

DEMO

Answer 2

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) 
}); 

, 당신은 형식의 필드를 알 수 있도록 속성을 추가하는 것이 좋습니다.

자바 스크립트에서 다음

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

, 당신이 그 요소를 선택하고 처리기를 설정할 수 있습니다

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

이 방법을, 당신은 단지 당신의 마크 업으로 그 속성을 추가해야하고, 글로벌 JS가 처리한다 그것의. 페이지별로 연결하는 것이 훨씬 적습니다.