原生js写一个简易键盘，不可拼音

晚晚的郁金香

已于 2024-06-05 15:38:33 修改

阅读量429

点赞数 9

文章标签：前端 css javascript

于 2024-02-01 15:22:44 首次发布

本文链接：https://blog.csdn.net/jdhxndbeg/article/details/135974984

版权

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript 键盘演示</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
    }

    #keyboard {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .row {
        display: flex;
        flex-direction: row;
    }

    .key {
        margin: 5px;
        padding: 10px;
        border: none;
        background-color: #f2f2f2;
        color: #333;
        font-size: 16px;
        cursor: pointer;
    }

    .key:hover {
        background-color: blue;
    }

    .inp {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    #inputField {
        padding: 10px;
        border: 2px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s ease;
    }

    #inputField:focus {
        border-color: #007bff;
        outline: none;
    }

    .custom-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .custom-button:hover {
            background-color: #45a049;
        }
</style>

<body>
    <div class="inp">
        <input type="text" id="inputField" placeholder="输入...">
        <!-- <button onclick="clearInput()">X</button> -->
        <button class="custom-button" onclick="clearInput()">clear</button>
    </div>
    <div id="keyboard"></div>


    <script>
        const keyboard = document.getElementById('keyboard');
        const inputField = document.getElementById('inputField');

        // 定义键盘布局
        const keyboardLayout = [
            ['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']
        ];

        // 创建键盘按钮
        keyboardLayout.forEach(row => {
            const rowDiv = document.createElement('div');
            rowDiv.classList.add('row');
            row.forEach(key => {
                const button = document.createElement('button');
                button.classList.add('key');
                button.innerHTML = key.toUpperCase();
                button.addEventListener('click', () => {
                    if (key === 'Enter') {
                        inputField.value += '\n';
                    } else {
                        inputField.value += key;
                    }
                });
                rowDiv.appendChild(button);
            });
            keyboard.appendChild(rowDiv);
        });

        function clearInput() {
            inputField.value = "";
        }
    </script>
</body>

</html>