JS实现字母大小写转换（附代码）

最新推荐文章于 2025-05-21 08:35:55 发布

_耀北

最新推荐文章于 2025-05-21 08:35:55 发布

阅读量2.1k

点赞数 17

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_72288930/article/details/142179413

功能说明：

1. 转为大写：点击该按钮后，inputA 中的值将转换为大写，并显示在 inputB 中。

2. 转为小写：点击该按钮后，inputA 中的值将转换为小写，并显示在 inputB 中。

3. 首字母大写：点击该按钮后，inputA 中的值将变为首字母大写，其他字母变为小写，结果显示在 inputB 中。

4. 复制：点击该按钮后，inputB 中的值将被复制到剪贴板，并弹出一个提示框显示复制的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本转换</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .container {
            margin-bottom: 20px;
        }
        input {
            padding: 10px;
            width: 100%;
            margin: 10px 0;
            font-size: 16px;
        }
        button {
            padding: 10px;
            margin-right: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        button:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>

<div class="container">
    <label for="inputA">输入框 A（原始文本）：</label>
    <input type="text" id="inputA" placeholder="输入内容...">
</div>

<div class="container">
    <label for="inputB">输入框 B（转换后的文本）：</label>
    <input type="text" id="inputB" placeholder="转换后的内容..." readonly>
</div>

<div class="container">
    <button onclick="toUpperCase()">转为大写</button>
    <button onclick="toLowerCase()">转为小写</button>
    <button onclick="capitalize()">首字母大写</button>
    <button onclick="copyText()">复制</button>
</div>

<script>
    // 转为大写
    function toUpperCase() {
        const inputA = document.getElementById('inputA').value;
        document.getElementById('inputB').value = inputA.toUpperCase();
    }

    // 转为小写
    function toLowerCase() {
        const inputA = document.getElementById('inputA').value;
        document.getElementById('inputB').value = inputA.toLowerCase();
    }

    // 首字母大写
    function capitalize() {
        const inputA = document.getElementById('inputA').value;
        const capitalized = inputA.charAt(0).toUpperCase() + inputA.slice(1).toLowerCase();
        document.getElementById('inputB').value = capitalized;
    }

    // 复制转换后的文本
    function copyText() {
        const inputB = document.getElementById('inputB');
        inputB.select();
        inputB.setSelectionRange(0, 99999); // 适配移动设备
        document.execCommand('copy');
        alert('已复制：' + inputB.value);
    }
</script>

</body>
</html>