JS数字软键盘|极客教程

JS数字软键盘

在前端开发中，有时候我们会需要使用数字软键盘来获取用户输入的数字。今天我们就来学习如何使用JavaScript来实现一个简单的数字软键盘。

实现思路

我们将通过HTML、CSS和JavaScript来实现一个简单的数字软键盘。首先我们需要在HTML中创建软键盘的基本结构，然后用CSS来实现样式，最后使用JavaScript来处理用户的输入。

HTML结构

首先在HTML文件中创建软键盘的基本结构，我们使用一个<div>元素包裹软键盘，并在其中创建一个数字按钮的表格。

<div class="keyboard">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td></td>
            <td>0</td>
            <td>←</td>
        </tr>
    </table>
</div>

CSS样式

接下来我们使用CSS来美化我们的数字软键盘。我们将使用一些基本的样式来设置软键盘的外观。

.keyboard {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
}

table {
    width: 100%;
}

td {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

td:hover {
    background: #f0f0f0;
}

JavaScript处理

最后我们使用JavaScript来处理用户的输入。我们将监听每个数字按钮的点击事件，并将点击的数字显示在输入框中。同时我们也需要处理退格按钮的点击事件。

document.querySelectorAll('.keyboard td').forEach(button => {
    button.addEventListener('click', () => {
        const value = button.innerText;
        if (value === '←') {
            // 处理退格逻辑
            const currentValue = document.querySelector('.input').value;
            document.querySelector('.input').value = currentValue.slice(0, -1);
        } else {
            // 添加输入的数字
            document.querySelector('.input').value += value;
        }
    });
});

完整示例

让我们将上面的HTML、CSS和JavaScript结合起来，创建一个完整的示例。

<!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>数字软键盘</title>
    <style>
        .keyboard {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            display: inline-block;
        }

        table {
            width: 100%;
        }

        td {
            padding: 10px;
            text-align: center;
            cursor: pointer;
        }

        td:hover {
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <input type="text" class="input" readonly>
    <div class="keyboard">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td></td>
                <td>0</td>
                <td>←</td>
            </tr>
        </table>
    </div>

    <script>
        document.querySelectorAll('.keyboard td').forEach(button => {
            button.addEventListener('click', () => {
                const value = button.innerText;
                if (value === '←') {
                    // 处理退格逻辑
                    const currentValue = document.querySelector('.input').value;
                    document.querySelector('.input').value = currentValue.slice(0, -1);
                } else {
                    // 添加输入的数字
                    document.querySelector('.input').value += value;
                }
            });
        });
    </script>
</body>
</html>