신청폼 작성 시 전화번호 자리수 고정하는 방법

굼떠

2024-06-17 (월) 13:46:54 24,829

상담 신청 폼에서 전화번호 영역 자리수를 11자리로 고정하고 싶습니다.

Copy

//js

<script>

function inputPhone() {

    let inputs = null;

 

    function rewrite( inp ) {

        let number_str = inp.value.replace(/-/g, "");

        let new_str = "";

       

        if(number_str.length > 6 && number_str.length <= 10) {

            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3, 3) + "-" + number_str.substr(6);

        }

        else if(number_str.length > 10 && number_str.length >= 11) {

            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3, 4) + "-" + number_str.substr(8);

        }

        else if(number_str.length > 3 && number_str.length <= 6) {

            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3);

        }

        else {

            new_str = number_str;

        }

 

        inp.value = new_str;

    }

 

    function init() {

        inputs = document.querySelectorAll(".input-phone");

        inputs.forEach(function( inp, i ) {

            rewrite( inp );

            if(!inp.dataset.isevent) {

                inp.addEventListener("keyup", function( e ) {

                    rewrite( inp );

                });

                inp.addEventListener("blur", function( e ) {

                    rewrite( inp );

                });

                inp.dataset.isevent = "true"

            }

        });

    }

 

    (function() {

        init();

    })();

 

    return {

        init

    };

}

</script>

//html

 <dl>

                    <dt><?php echo $exhibition_counsel_data_list['hphone'];?></dt>

                    <dd>

                        <div class="input-box">

                            <input type="text" name="hphone" <?php echo $exhibition['e_data']['is_essential']['hphone']?'required':'' ;?>  itemname="<?php echo $exhibition_counsel_data_list['hphone'];?>" placeholder="전화번호를 입력해주세요" maxlength="13" class="input-number input-phone">

                        </div>

                    </dd>

                        </dl>

코드는 이렇고요

아래 코드는 제가 하다가 실패한거긴한데

Copy

// $('.input-phone').keyup(function(e) {

//     let content = $(this).val();

//     $('.input-phone').focusout(function(){

       

//     })

//     if(content.length < 11) {

//         $(this).val($(this).val().substring(0,11));

//         alert("연락처는 11자리여야 합니다.");

//         return false;

//     }

// })

얼럿창이라 그런가 input 에서 포커스가 벗어나면 무한정으로 경고창이 뜨네요 ㅠㅠ

어떻게 해야 좋을까요ㅕ?

그누보드5 jquery

답변 3개 / 댓글 2개

채택된 답변

+20 포인트

coDribble

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2024-06-17 (월) 14:04:47

Copy

// $('.input-phone').blur(function(){
//     let content = $(this).val();
// 
       if(content.length == 11) { 
           return;
       }else{
//         $(this).val($(this).val().substring(0,11));
//         alert("연락처는 11자리여야 합니다.");
//         return false;
//     }
// })

해당 input 에 keyup event 발생할때마다 자리수 체크해서 계속 alert 창 뜰거 같아 보이는데요...;;

하나 더... keyup event 안에 focusout event 가 있어야할 이유가 있나요...??

해당 input 에 포커스를 잃었을 때 자리수 확인하고 alert 창 띄우면 되지 않을까요...??

Min아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2024-06-17 (월) 14:10:46

Copy

function rewrite(inp) {
        let number_str = inp.value.replace(/-/g, "");
        let new_str = "";

        if (number_str.length > 6 && number_str.length <= 10) {
            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3, 3) + "-" + number_str.substr(6);
        } else if (number_str.length == 11) {
            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3, 4) + "-" + number_str.substr(7);
        } else if (number_str.length > 3 && number_str.length <= 6) {
            new_str = number_str.substr(0, 3) + "-" + number_str.substr(3);
        } else {
            new_str = number_str;
        }

        inp.value = new_str;
    }

이렇게 하셔도 안되시나요?

답변에 대한 댓글 1개

굼떠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2024-06-17 (월) 14:26:16

네 안되네여 coDribble님 답변주신 방법으로 해결했습니다. 시간내주셔서 감사합니다!

Min아빠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2024-06-17 (월) 13:56:53

js에

Copy

} else if (number_str.length == 11) {

new_str = number_str.substr(0, 3) + "-" + number_str.substr(3, 4) + "-" + number_str.substr(7);

를 추가하시면 될꺼 같습니다.

그리고 input box 에 maxlength="11" 도 추가해주세요.

답변에 대한 댓글 1개

굼떠

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2024-06-17 (월) 13:59:58

답변을 작성하려면 로그인이 필요합니다.

신청폼 작성 시 전화번호 자리수 고정하는 방법

답변 3개 / 댓글 2개

답변에 대한 댓글 1개

답변에 대한 댓글 1개

공유하기