Create a virtual keyboard that users can interact with on the webpage.

Create a virtual keyboard that users can interact with on the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Keyboard</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        #keyboard {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 5px;
            max-width: 500px;
            margin-bottom: 20px;
        }

        button {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
        }

        #inputField {
            font-size: 16px;
            padding: 10px;
            width: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <input type="text" id="inputField" readonly>
    <div id="keyboard"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const keyboard = document.getElementById('keyboard');
            const inputField = document.getElementById('inputField');
            const keys = [
                '1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
                'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
                'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
                'Z', 'X', 'C', 'V', 'B', 'N', 'M',
                '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '-',
                'Tab', 'Shift', 'Control', 'Enter', 'Backspace',
                '↑', '←', '↓', '→'
            ];

            keys.forEach(key => {
                const button = document.createElement('button');
                button.textContent = key;
                button.addEventListener('click', () => onKeyPress(key));
                keyboard.appendChild(button);
            });

            function onKeyPress(key) {
                switch (key) {
                    case 'Tab':
                        inputField.value += '\t';
                        break;
                    case 'Shift':
                        // Handle Shift key
                        break;
                    case 'Control':
                        // Handle Control key
                        break;
                    case 'Enter':
                        inputField.value += '\n';
                        break;
                    case 'Backspace':
                        inputField.value = inputField.value.slice(0, -1);
                        break;
                    case '↑':
                        // Handle up arrow key
                        break;
                    case '←':
                        // Handle left arrow key
                        break;
                    case '↓':
                        // Handle down arrow key
                        break;
                    case '→':
                        // Handle right arrow key
                        break;
                    default:
                        inputField.value += key;
                        break;
                }
            }
        });
    </script>
</body>
</html>
Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 60