Jam's story

[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용 본문

WEB/JavaScript

[JS] 엔터쳐서 숫자를 이어받고, 합을 출력 -onkeydown 사용

애플쩀 2022. 5. 30. 16:51 
<!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{
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="text" autofocus="autofocus">+
    <input type="text" >=
    <input type="text" disabled="disabled">

    <script>
        document.querySelector("input:first-of-type").onkeydown=function(){
        //   event 객체의 keyCode값
            if(event.keyCode==13){
                document.querySelector("input:nth-of-type(2)").focus();
            }
        }
        document.querySelector("input:nth-of-type(2)").onkeydown=function(){
        //   event 객체의 keyCode값
            if(event.keyCode==13){
                var x=document.querySelector("input:first-of-type").value;
                var y=document.querySelector("input:nth-of-type(2)").value;
                document.querySelector("input:nth-of-type(3)").value=parseInt(x)+parseInt(y);
                document.querySelector("input:first-of-type").focus();
                document.querySelector("input:first-of-type").select();
            }
        }

    </script>
</body>
</html>
Document + =

 

select() 란?

element.select() 를 호출 하면 입력에 초점을 맞출 필요가 없으므로.focus() 와 함께 자주 사용됩니다

이렇게 드래그 되어 나타난다. 

 

 

 

 

내일 

\+-* 셀렉트로 골라서 

사칙연산 가능하게 

 

저작자표시 (새창열림)

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

[ JS] days03  (0) 2022.06.02
[JS] 체크 모두풀기, 해제하기  (0) 2022.06.02
[JS] input-text 입력받으면 넘어가고, p에 출력  (0) 2022.05.30
[JS] 자바스크립트의 기본적인 문법  (0) 2022.05.30
[JS] day2- 시험  (0) 2022.05.30
'WEB/JavaScript' Related Articles more
Comments