EverGiver

login 본문

Front-End (웹)/jQuery

login

친절한개발초보자 2021. 12. 29. 17:01
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login1</title>
</head>
<body>
    <p>
        <label for="uid">아이디</label>
        <input type="text" id="uid" value="ID">
    </p>

    <p>
        <label for="upw">비밀번호</label>
        <input type="text" id="upw" value="PW">
    </p>

    <script src="js/jquery-3.6.0.js"></script>
    <script>
        // 태그에 있는 내용은 text / form에 있는 내용은 value라고 한다.
        // .val('내용') : 내용을 변경하여라
        // .val('') : 내용을 지워라
        // .val() : 내용을 가지고 와라 / 확인하여라

        // #uid에 focus 되었을 때, value값이 'ID'라면 해당 value를 지워라
        // #uid에서 blur 되었을 때, value 값이 비어있으면 다시 'ID'라고 표시
        $(function(){
            $('#uid').focus(function(){
                if($('#uid').val() == 'ID'){
                    $(this).val('')
                }
            })

            $('#uid').blur(function(){
                if($('#uid').val() == ''){
                    $(this).val('ID')
                }
            })

            $('#upw').focus(function(){
                if($('#upw').val() == 'PW'){
                    $('#upw').val('')
                }
            })

            $('#upw').blur(function(){
                if($('#upw').val() == ''){
                    $('#upw').val('PW')
                }
            })
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login2</title>
    <style>
        input{color:#aaa;}
        .color{color:#000;}
    </style>
</head>
<body>
    <p>
        <label for="uid">아이디</label>
        <input type="text" id="uid" value="ID">
    </p>

    <p>
        <label for="upw">비밀번호</label>
        <input type="text" id="upw" value="PW">
    </p>

    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $('input').each(function(){
                var txt_o = this.defaultValue; // 원래의 value값을 기록

                // 각 input에 focus했을 때, 지금의 value값이 원래의 value값과
                // 같다면 해당 value를 삭제
                $(this).focus(function(){
                    var txt_n = $(this).val()
                    if(txt_n == txt_o){
                        $(this).val('')
                        $(this).addClass('color')
                    }
                })

                // 현재의 input에서 blur되었을 때, 지금의 value값이 비어있으면
                // 다시 이전 value값이 표시되어라
                $(this).blur(function(){
                    var txt_n = $(this).val()
                    if(txt_n == ''){
                        $(this).val(txt_o).removeClass('color')
                    }
                })

            })
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login3</title>
    <style>
        *{margin:0;padding:0;}

        div{
            margin:10px;
            position:relative;
        }

        label{
            position:absolute;
            left:10px;
            top:7px;
            font-size:12px;
            color:#aaa;
        }

        input{
            width:200px;
            height:30px;
            border:1px solid #aaa;
        }

        .blind{
            position:absolute;;
            left:-9999px;
        }
    </style>
</head>
<body>
    <div>
        <label for="uid">아이디</label>
        <input type="text" id="uid">
    </div>

    <div>
        <label for="upw">비밀번호</label>
        <input type="password" id="upw">
    </div>

    <script src="js/jquery-3.6.0.js"></script>
    <script>
        // input에 focus했을 때, 해당 label을 표시하지 말아라
        // input에서 blur되었을 때, 만약 input이 비어있으면 해당 label을 다시 표시하여라
        $(function(){
            $('input').focus(function(){
                $(this).prev().addClass('blind')
            })

            $('input').blur(function(){
                var txt = $(this).val()
                if(txt == ''){
                    $(this).prev().removeClass('blind')
                }
            })
        })
    </script>
</body>
</html>
  • 글자를 표시하지 않는 방식
    1. 시각장애인 X
       → display:none;
    2. 시각장애인 O, 영역 O (배경 이미지를 설정하는 경우)
       → text-indent:-9999px;overflow:hidden;
    3. 시각장애인 X, 영역 X
       → text-indent:-9999px;overflow:hidden;width:0;height:0;position:absolute;
       → position:absoulte;left:-9999px; 
           (주로 blind나 screen_out이라는 class를 추가하여 사용한다)
728x90
저작자표시

'Front-End (웹) > jQuery' 카테고리의 다른 글

DOM을 이용한 이벤트 처리기  (0) 2022.01.15
gnb  (0) 2021.12.30
each()  (0) 2021.12.27
accordion  (0) 2021.12.27
class  (0) 2021.12.26
'Front-End (웹)/jQuery' Related Articles more
Comments