미리 채워진 입력 필드를 서식하는 방법

페이지가로드 될 때 API 호출의 데이터로 전화 입력 필드를 채우는 중입니다.미리 채워진 입력 필드를 서식하는 방법

다음과 같이 전화 번호의 형식을 지정하는 기능이 있습니다. +1 (888) 333 4444. 그러나이 기능은 keyup 이벤트가있을 때만 작동합니다. 이 미리 채워진 입력 값을이 동일한 함수로 형식화하려고합니다. 나는 이벤트를 keyup에서 load, onload로 변경하려고 시도했지만 아무런 영향을 미치지 않습니다. setTimeout 지연 함수를 래핑하는 시도했지만 그 중 하나를 작동하지 않았다. 나는 간단하게 뭔가를 누락 알고

... 페이지 하단에서

<!DOCTYPE html> 
<html> 
    <body> 
    <form> 
     <label>Telephone</label> 
     <input type="tel" onload="phoneMask()" value="<?= data.phone ?>"/> 
    </form> 

    <script> 
    //Format telephone numbers 
    function phoneMask() { 
     var num = $(this).val().replace(/\D/g,''); 
     $(this).val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18)); 
    }; 
    $('[type="tel"]').keyup(phoneMask) 
    </script> 
    </body> 
</html>

출처

2017-04-13 Deven Blackburn

, 스크립트 섹션에서 추가 :

function phoneMask() { 
    var num = $("input[type=tel]").val().replace(/\D/g,''); 
    $("input[type=tel]").val('+' + num.substring(0,1) + ' (' + num.substring(1,4) + ') ' + num.substring(4,7) + ' ' + num.substring(7,18)); 
    }; 

$(document).ready(function() { 
    phoneMask(); 
});

나는 당신의 phoneMask 기능을 편집했습니다. 페이지가로드되면 phoneMask 함수가 호출됩니다.

이것은 tel 유형의 하나의 상자 만 될 것이라는 가정하에 작동합니다. 그렇지 않으면 각각을 사용하는 셀렉터가있는 phoneMask 영역에서 코드를 래핑해야합니다.

출처

2017-04-13 19:58:59 Simon

태그 바로 위에 복사하여 붙여 넣었지만 행운은 없습니다. –

업데이트 된 코드로 원래 응답을 편집했습니다. – Simon

아, 그 완벽하게 작동합니다. 고마워요 @ 사이먼! –

미리 채워진 입력 필드를 서식하는 방법

답변

관련 문제