Javascript를 사용하여 Enter 및 화살표 키 처리

인턴십에서 "Enter"키를 처리하는 작업이 할당되었습니다.
사실 저는 프론트엔드 개발에 대해 잘 모릅니다. 그러나 여기에 과제를 해결하고 새로운 것을 배우려는 나의 노력이 있습니다.

그래서 작업은 테이블의 셀을 편집할 수 있는 테이블을 생성하는 것이었습니다. 그리고 '엔터' 버튼을 누를 때마다 다음 셀을 선택해야 합니다.

처음에는 쉬워보여서 코딩을 시작했습니다. 이 작업이 이벤트와 관련이 있다는 것을 알고 있었습니다. 그런데 해결하다 보니 구글링을 많이 해야 하더군요. 그리고 많은 오류를 겪고 그 오류를 해결한 끝에 마침내 작업을 해결했습니다.

솔루션의 모습은 다음과 같습니다.

먼저 'index.html'이라는 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>Index</title>
</head>
<body>
    <h1 style="text-align:center">Demo of handling Enter and arrow keys</h1>
    <br>
    <div>
        <table id="dataTable">
            <tbody id="tableBody">

            </tbody>
        </table>
    </div>

</body>
</html>

여기 div 태그 안에 테이블을 만들었습니다. 동적으로 테이블을 생성하기로 결정했습니다.

이제 동적으로 테이블을 생성합니다.

function createTable(rows, columns) {
    for (let i=0; i<rows; i++) {
        let row = document.createElement('tr');

        for (let j=0; j<columns; j++) {
            let cell = document.createElement('td');

            cell.setAttribute('contenteditable', 'true') //makes cell editable
            cell.setAttribute('onkeyup','handleEvent(event)')  // calls postAnswer() function on keyup

            cell.innerHTML = `${i}${j}`;
            row.appendChild(cell);
        }
        document.getElementById('tableBody').appendChild(row);
    }

}

여기서 행과 열은 매개변수입니다. 즉, 테이블은 모든 행과 열로 생성될 수 있습니다.

이제 부트스트랩을 사용하여 테이블을 보기 좋게 만들어 보겠습니다. 여기서는 부트스트랩 cdn을 사용했습니다.

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

태그 내에서 부트스트랩 cdn을 사용하십시오.

태그에 부트스트랩 클래스를 추가합니다.

<table class="table table-striped table-bordered" id="dataTable">
            <tbody id="tableBody">

            </tbody>
        </table>

이제 테이블이 약간 좋아 보입니다.

이제 Enter 키와 누른 화살표 키를 처리해 보겠습니다. 여기서 주요 작업은 엔터를 눌렀을 때 오른쪽에 있는 다음 셀을 선택해야 하는 것입니다.

function handleEvent(event) {
    // handles events for "enter"/ "up"/ "down"/ "left"/ "right" arrow keys

    if (event.which == 13) {
        //prevents the default action of the event from happening
        event.preventDefault();

        if (event.target.nextSibling != null) {
            // go to next cell
            event.target.nextSibling.focus()
        }
        else {
            // go to next row's first cell
            event.target.parentElement.nextSibling.firstChild.focus()
        }
    }
}

이것은 눌려진 Enter 키를 처리하고 오른쪽 셀을 선택합니다.
하지만 좋은 사용자 경험을 제공할 수 있도록 화살표 키도 처리하고 싶었습니다.

if (event.which == 39) {
        // go to next cell
        event.target.nextSibling.focus()
    }

    if (event.which == 37) {
        // go to previous cell
        event.target.previousSibling.focus()
    }

    if (event.which == 38) {
        // go to previous row's same cell
        event.target.parentElement.previousSibling.childNodes[event.target.cellIndex].focus()
    }

    if (event.which == 40) {
        // go to next row's same cell
        event.target.parentElement.nextSibling.childNodes[event.target.cellIndex].focus()
    }

이것은 모든 화살표 키에 대해 작동했으며 좋은 사용자 경험을 제공합니다.

최종 코드는 다음과 같습니다.

index.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>Index</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="table.js"></script>
    <script src="events.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

</head>
<body>
    <h1 style="text-align:center">Demo of handling Enter and arrow keys</h1>
    <br>
    <div>
        <table class="table table-striped table-bordered" id="dataTable">
            <tbody id="tableBody">

            </tbody>
        </table>
    </div>

    <script>
        createTable(10,10);
    </script>


</body>
</html>

테이블.js

function createTable(rows, columns) {
    for (let i=0; i<rows; i++) {
        let row = document.createElement('tr');

        for (let j=0; j<columns; j++) {
            let cell = document.createElement('td');

            cell.setAttribute('contenteditable', 'true') //makes cell editable
            cell.setAttribute('onkeyup','handleEvent(event)')  // calls postAnswer() function on keyup

            cell.innerHTML = `${i}${j}`;
            row.appendChild(cell);
        }
        document.getElementById('tableBody').appendChild(row);
    }

}

이벤트.js

function handleEvent(event) {
    // handles events for "enter"/ "up"/ "down"/ "left"/ "right" arrow keys

    if (event.which == 13) {
        //prevents the default action of the event from happening
        event.preventDefault();

        if (event.target.nextSibling != null) {
            // go to next cell
            event.target.nextSibling.focus()
        }
        else {
            // go to next row's first cell
            event.target.parentElement.nextSibling.firstChild.focus()
        }
    }

    if (event.which == 39) {
        // go to next cell
        event.target.nextSibling.focus()
    }

    if (event.which == 37) {
        // go to previous cell
        event.target.previousSibling.focus()
    }

    if (event.which == 38) {
        // go to previous row's same cell
        event.target.parentElement.previousSibling.childNodes[event.target.cellIndex].focus()
    }

    if (event.which == 40) {
        // go to next row's same cell
        event.target.parentElement.nextSibling.childNodes[event.target.cellIndex].focus()
    }
}

그리고 이것은 코드의 최종 결과입니다.

이 작업을 해결하는 것이 재미있었고 이벤트에 대해서도 거의 알지 못했습니다. 다른 사람들에게도 도움이 되길 바랍니다.

자바스크립트 초보자

자바 패턴 문제