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

7871 단어 htmljavascripttutorialprogramming
인턴십에서 "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>


태그 안에 bootstrap 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>


table.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);
    }

}


events.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()
    }
}


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



이 작업을 해결하는 것이 즐거웠고 이벤트에 대해서도 거의 알지 못했습니다. 다른 사람들에게도 도움이 되기를 바랍니다.
스크립팅 I로 일상의 지루한 작업 자동화
cron을 사용하여 Linux에서 MySQL 데이터베이스를 백업 및 복원하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage