실습_HTML

Aug 05, 2024

Contents

틀 만들기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form>
        username : <input type ="text" id = "username"><br>
        <div></div>
        password : <input type ="text" id = "password"><br>
        <div></div>
        telephone : <input type ="text" id = "telephone"><br>
        <button>버튼</button>
    </form>

</body>
</html>

💡

미션1) username에 길이가 5자 이상이 되면, <div>에 username 길이를 초과했어요


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        #error-log{
            display: none;
            color: red;
        }

    </style>
</head>
<body>
    <form>
        username : <input type ="text" id = "username"><br>
        <div id="error-log">유저네임 길이를 초과하였습니다</div>
        password : <input type ="text" id = "password"><br>
        <div></div>
        telephone : <input type ="text" id = "telephone"><br>
        <button>버튼</button>
    </form>

    <script>
        function checkUsername(){
            let username = $("#username").val();

            if(username.length >= 5){
                console.log("username has to be under 5");
                // alert("유저네임 길이를 초과했어요.");
                $("#error-log").css("display","block");
                return false;
            }else{ 
                $("#error-log").css("display","none");
                return true;
            }
           
        }

        $("#username").on('input', (e) => {
            checkUsername();
        });

      


    </script>

</body>
</html>

💡

미션2) 비번은 특수문자가 들어오는 순간, div에 특수문자는 들어올 수 없어요. !@#$%^&*


 function checkPasswords(){
            let password = $("#password").val();
            let specialChars = /[!@#$%^&*]/;

            if(specialChars.test(password)){
                console.log("특수문자는 들어 올 수 없어요.");
                $("#error-log2").css("display", "block");
                return false;
            }else{ $("#error-log2").css("display", "none");
            return true;}
        }
        
        $("#password").on('input', function() {
            checkPasswords();
        });

💡

미션3) 전화번호는 focus 이벤트를 써서 포커스가 들어오는 순간 010을 value에 자동추가 되기.

💡

focus() : 대상 요소로 포커스가 이동하면 이벤트를 발생


function checkTelephone(){
            let telephone = $("#telephone").val();

            if( telephone.length > 0){
                $("#telephone-log").css("display","block");
                return true;
            }else{
                $("#telephone-log").css("display","none");
                return false;
            }       
        }

        $("#telephone").on('focus', function() {
            if($("#telephone").val().length === 0){
                $("#telephone").val("010")
            }
            checkTelephone();
        });

010 커서가 맨 오른쪽 끝에 가도록


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        #error-log{
            display: none;
            color: red;
        }

        #error-log2{
            display: none;
            color: red;
        }

    </style>
</head>
<body>
    <form>
        username : <input type ="text" id = "username"><br>
        <div id="error-log">유저네임 길이를 초과하였습니다</div>
        password : <input type ="text" id = "password"><br>
        <div id="error-log2">비밀번호에 특수 문자는 들어올 수 없어요</div>
        telephone : <input type ="text" id = "telephone" ><br>

        <button>버튼</button>
    </form>

    <script>
        function checkUsername(){
            let username = $("#username").val();

            if(username.length >= 5){
                console.log("username has to be under 5");
                // alert("유저네임 길이를 초과했어요.");
                $("#error-log").css("display","block");
                return false;
            }else{ 
                $("#error-log").css("display","none");
                return true;
            }
           
        }

        $("#username").on('input', (e) => {
            checkUsername();
        });

        function checkPasswords(){
            let password = $("#password").val();
            let specialChars = /[!@#$%^&*]/;

            if(specialChars.test(password)){
                console.log("특수문자는 들어 올 수 없어요.");
                $("#error-log2").css("display", "block");
                return false;
            }else{ $("#error-log2").css("display", "none");
            return true;}
        }
        
        $("#password").on('input', function() {
            checkPasswords();
        });


        

        function checkTelephone(){
            let telephone = $("#telephone").val();

            if( telephone.length > 0){
                $("#telephone-log").css("display","block");
                return true;
            }else{
                $("#telephone-log").css("display","none");
                return false;
            }       
        }

        $("#telephone").on('focus', function() {
            if($("#telephone").val().length === 0){
                $("#telephone").val("010");
                //커서 맨 끝으로 이동
                this.setSelectionRange(3,3);
            }
            checkTelephone();
        });



      


    </script>

</body>
</html>

setselectionRange


텍스트 입력 필드 내에서 커서의 위치를 설정하는 JavaScript 메서드입니다. 
여기서 this는 이벤트 핸들러 내에서 포커스를 받은 입력 필드 요소를 참조합니다.
setSelectionRange(start, end)는 커서 또는 선택 범위의 시작과 끝 위치를 지정합니다.

Contents

틀 만들기 010 커서가 맨 오른쪽 끝에 가도록

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <form> username : <input type ="text" id = "username"><br> <div></div> password : <input type ="text" id = "password"><br> <div></div> telephone : <input type ="text" id = "telephone"><br> <button>버튼</button> </form> </body> </html>

function checkPasswords(){ let password = $("#password").val(); let specialChars = /[!@#$%^&*]/; if(specialChars.test(password)){ console.log("특수문자는 들어 올 수 없어요."); $("#error-log2").css("display", "block"); return false; }else{ $("#error-log2").css("display", "none"); return true;} } $("#password").on('input', function() { checkPasswords(); });

function checkTelephone(){ let telephone = $("#telephone").val(); if( telephone.length > 0){ $("#telephone-log").css("display","block"); return true; }else{ $("#telephone-log").css("display","none"); return false; } } $("#telephone").on('focus', function() { if($("#telephone").val().length === 0){ $("#telephone").val("010") } checkTelephone(); });

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <style> #error-log{ display: none; color: red; } #error-log2{ display: none; color: red; } </style> </head> <body> <form> username : <input type ="text" id = "username"><br> <div id="error-log">유저네임 길이를 초과하였습니다</div> password : <input type ="text" id = "password"><br> <div id="error-log2">비밀번호에 특수 문자는 들어올 수 없어요</div> telephone : <input type ="text" id = "telephone" ><br> <button>버튼</button> </form> <script> function checkUsername(){ let username = $("#username").val(); if(username.length >= 5){ console.log("username has to be under 5"); // alert("유저네임 길이를 초과했어요."); $("#error-log").css("display","block"); return false; }else{ $("#error-log").css("display","none"); return true; } } $("#username").on('input', (e) => { checkUsername(); }); function checkPasswords(){ let password = $("#password").val(); let specialChars = /[!@#$%^&*]/; if(specialChars.test(password)){ console.log("특수문자는 들어 올 수 없어요."); $("#error-log2").css("display", "block"); return false; }else{ $("#error-log2").css("display", "none"); return true;} } $("#password").on('input', function() { checkPasswords(); }); function checkTelephone(){ let telephone = $("#telephone").val(); if( telephone.length > 0){ $("#telephone-log").css("display","block"); return true; }else{ $("#telephone-log").css("display","none"); return false; } } $("#telephone").on('focus', function() { if($("#telephone").val().length === 0){ $("#telephone").val("010"); //커서 맨 끝으로 이동 this.setSelectionRange(3,3); } checkTelephone(); }); </script> </body> </html>

텍스트 입력 필드 내에서 커서의 위치를 설정하는 JavaScript 메서드입니다. 여기서 this는 이벤트 핸들러 내에서 포커스를 받은 입력 필드 요소를 참조합니다. setSelectionRange(start, end)는 커서 또는 선택 범위의 시작과 끝 위치를 지정합니다.