Jam's story

[JS] input-text 입력받으면 넘어가고, p에 출력 본문

WEB/JavaScript

[JS] input-text 입력받으면 넘어가고, p에 출력

애플쩀 2022. 5. 30. 16:44 
<!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>Document</title>
    <style>
        input[type=text]{
            text-align: center;
        }
    </style>
</head>
<body>
    1번째칸을 다쓰고 엔터를 누르면 다음칸으로 넘어갑니다. 
    <br>
    다 입력하였을때는 아래 p에 나타납니다. 
    <hr>
    주민등록번호:
    <input type="text" id="rrn6" autofocus="autofocus" onkeydown="rrn6_keydown()">- <input type="text" id="rrn7" onkeydown="rrn7_keydown()">
    <p id="demo"></p>
<script>
    function rrn6_keydown(){
        if(event.keyCode==13){
            document.getElementById("rrn7").focus();

        }
    }
    function rrn7_keydown(){
        if(event.keyCode==13){
           document.getElementById("demo").innerText=  document.getElementById("rrn6").value+"-"+  document.getElementById("rrn7").value;
            
        }
    }
</script>
</body>
</html>
Document 1번째칸을 다쓰고 엔터를 누르면 다음칸으로 넘어갑니다.
다 입력하였을때는 아래 p에 나타납니다.
주민등록번호: -

 

 

앞자리 6자리 쓰면 다음 칸으로 넘어가고 뒷자리 7자리 쓰면 p에 출력 

<!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>Document</title>
    <style>
        input[type=text]{
            text-align: center;
        }
    </style>
</head>
<body>

    주민등록번호:
    <input type="text" id="rrn6" autofocus="autofocus" onkeydown="rrn6_keydown()">- <input type="text" id="rrn7" onkeydown="rrn7_keydown()">
    <p id="demo"></p>
<script>
    function rrn6_keydown(){
        if(event.keyCode==13){
            document.getElementById("rrn7").focus();

        }
    }
    function rrn7_keydown(){
        if(event.keyCode==13){
           document.getElementById("demo").innerText=  document.getElementById("rrn6").value+"-"+  document.getElementById("rrn7").value;
            
        }
    }
</script>
</body>
</html>
Document 주민등록번호: -

 

keydown , keypress 는 이벤트를 먼저 발생시키고 출력 하기때문에 

keyup으로 써야한다. 

 

<!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>Document</title>
    <style>
        input[type=text]{
            text-align: center;
        }
    </style>
</head>
<body>

    주민등록번호:
    <input type="text" id="rrn6" autofocus="autofocus" onkeyup="rrn6_keyup()">- <input type="text" id="rrn7" onkeyup="rrn7_keyup()">
    <p id="demo"></p>
<script>
    function rrn6_keyup(){
        if(document.getElementById("rrn6").value.length==6){
            document.getElementById("rrn7").focus();
        }
    }
    function rrn7_keyup(){
        if(document.getElementById("rrn7").value.length==7){
           document.getElementById("demo").innerText=document.getElementById("rrn6").value+"-"+  document.getElementById("rrn7").value;
            
        }
    }
</script>
</body>
</html>
Document 주민등록번호: -

 

여기서 문제는 ?- 숫자가 아닌 문자를 입력했을때 

=> 주민번호 문자를 입력하면 입력취소하고 경고창 띄우기 

keydown, keypress 는 일어난 이벤트를 취소할 수 있다 .

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] 체크 모두풀기, 해제하기  (0) 2022.06.02
[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용  (0) 2022.05.30
[JS] 자바스크립트의 기본적인 문법  (0) 2022.05.30
[JS] day2- 시험  (0) 2022.05.30
[JS] 클래스 추가하기  (0) 2022.05.29
'WEB/JavaScript' Related Articles more
Comments