JS 复制 Input 内容完整教程

本教程将带你从零开始，学习如何使用 JavaScript 复制 <input> 输入框中的内容，我们将涵盖三种主流方法,并分析各自的优缺点。

js复制input内容教程视频
（图片来源网络，侵删）

最终效果预览

我们将创建一个简单的页面，包含一个输入框和一个“复制”按钮，点击按钮后,输入框中的内容就会被复制到剪贴板。

第一步：准备 HTML 结构

我们需要一个基本的 HTML 文件，它包含一个输入框（<input>）和一个用于触发复制动作的按钮（<button>）。

为了让用户知道复制是否成功,我们还会添加一个提示信息区域。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JS 复制 Input 内容教程</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #333;
        }
        input {
            width: 300px;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        #message {
            margin-top: 15px;
            font-size: 14px;
            color: #28a745; /* 成功消息的颜色 */
            height: 20px; /* 固定高度，避免布局跳动 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>复制 Input 内容</h1>
        <input type="text" id="myInput" value="你好，世界！">
        <br>
        <button id="copyButton">点击复制</button>
        <p id="message"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

代码解释：

js复制input内容教程视频
（图片来源网络，侵删）
  • input: 我们给它设置了 id="myInput"，这样我们就可以用 JS 精准地找到它。
  • button: 我们给它设置了 id="copyButton",用于绑定点击事件。
  • p: id="message" 用于显示“复制成功”或“复制失败”的提示。

第二步：编写 JavaScript 逻辑

我们创建一个 script.js 文件,来实现核心的复制功能。

我们将介绍三种方法,你可以选择最适合你项目的一种。

现代推荐法 - navigator.clipboard.writeText() (最简单)

这是目前最推荐、最简洁的方法，它基于现代浏览器的 Clipboard API,语法非常直观。

script.js

js复制input内容教程视频
（图片来源网络，侵删）
// 1. 获取页面上的元素
const copyButton = document.getElementById('copyButton');
const myInput = document.getElementById('myInput');
const message = document.getElementById('message');
// 2. 为按钮添加点击事件监听器
copyButton.addEventListener('click', () => {
    // 获取输入框的当前值
    const textToCopy = myInput.value;
    // 检查输入框是否有内容
    if (!textToCopy) {
        showMessage('输入框是空的，没有内容可复制！', 'error');
        return;
    }
    // 使用 Clipboard API 将文本写入剪贴板
    navigator.clipboard.writeText(textToCopy)
        .then(() => {
            // 复制成功，显示成功消息
            showMessage('内容已成功复制到剪贴板！', 'success');
        })
        .catch(err => {
            // 如果复制失败（在非安全上下文中如 HTTP），显示错误消息
            console.error('复制失败:', err);
            showMessage('复制失败，请重试。', 'error');
        });
});
// 显示消息的辅助函数
function showMessage(msg, type) {
    message.textContent = msg;
    message.style.color = type === 'success' ? '#28a745' : '#dc3545';
    // 3秒后清除消息
    setTimeout(() => {
        message.textContent = '';
    }, 3000);
}

代码解释：

  1. 获取元素: 我们用 document.getElementById() 获取了按钮、输入框和消息提示的 DOM 元素。
  2. 添加事件监听: copyButton.addEventListener('click', ...) 表示当用户点击按钮时,执行后面的箭头函数。
  3. 获取值: myInput.value 获取了输入框里当前的文本。
  4. navigator.clipboard.writeText(): 这是核心 API，它接收一个字符串作为参数,并将其写入剪贴板。
  5. .then() 和 .catch(): writeText() 返回一个 Promise。
    • 如果复制成功，.then() 里的代码会执行，我们调用 showMessage 显示成功提示。
    • 如果复制失败（比如在 http 协议的网站上而不是 https），.catch() 里的代码会执行,我们打印错误信息并显示失败提示。
  6. showMessage 函数: 这是一个辅助函数,用于统一管理提示信息的显示和样式。

传统兼容法 - document.execCommand('copy') (已废弃)

这个方法在旧版浏览器中非常流行，但已被现代标准废弃，了解它仍然很有用，因为它在一些特定场景（如需要兼容非常老的浏览器）下可能还有用。

script.js 内容 (替换掉方法一的代码):

const copyButton = document.getElementById('copyButton');
const myInput = document.getElementById('myInput');
const message = document.getElementById('message');
copyButton.addEventListener('click', () => {
    const textToCopy = myInput.value;
    if (!textToCopy) {
        showMessage('输入框是空的，没有内容可复制！', 'error');
        return;
    }
    // 创建一个临时的 textarea 元素
    const textarea = document.createElement('textarea');
    textarea.value = textToCopy;
    // 使其不可见
    textarea.style.position = 'fixed'; // 防止页面滚动
    textarea.style.opacity = '0';
    // 将其添加到页面中
    document.body.appendChild(textarea);
    // 选中文本
    textarea.select();
    textarea.setSelectionRange(0, textarea.value.length); // 兼容移动设备
    // 执行复制命令
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            showMessage('内容已成功复制到剪贴板！', 'success');
        } else {
            showMessage('复制失败，请重试。', 'error');
        }
    } catch (err) {
        console.error('复制失败:', err);
        showMessage('复制失败，请重试。', 'error');
    }
    // 移除临时的 textarea
    document.body.removeChild(textarea);
});
function showMessage(msg, type) {
    message.textContent = msg;
    message.style.color = type === 'success' ? '#28a745' : '#dc3545';
    setTimeout(() => {
        message.textContent = '';
    }, 3000);
}

代码解释：

  1. 创建临时元素: 因为 execCommand('copy') 只能复制当前用户选中的文本，所以我们不能直接操作 <input>，我们需要创建一个隐藏的 <textarea> 元素。
  2. 设置值并添加到页面: 将输入框的值赋给这个 <textarea>，然后把它添加到 <body> 中。
  3. 选中所有文本: textarea.select() 会选中 <textarea> 里的所有文本。
  4. 执行复制: document.execCommand('copy') 会尝试将当前选中的文本复制到剪贴板。
  5. 清理工作: 无论成功与否，最后都要记得用 document.body.removeChild(textarea) 把这个临时元素从页面上移除,以免影响页面布局。

终极兼容法 - 结合两种方法

为了获得最佳兼容性（既支持现代浏览器，又兼容旧浏览器）,我们可以将两种方法结合起来。

script.js 内容 (替换掉之前的代码):

const copyButton = document.getElementById('copyButton');
const myInput = document.getElementById('myInput');
const message = document.getElementById('message');
// 检查是否支持现代 Clipboard API
if (navigator.clipboard && navigator.clipboard.writeText) {
    // 如果支持，使用现代方法
    copyButton.addEventListener('click', () => {
        const textToCopy = myInput.value;
        if (!textToCopy) {
            showMessage('输入框是空的，没有内容可复制！', 'error');
            return;
        }
        navigator.clipboard.writeText(textToCopy)
            .then(() => showMessage('内容已成功复制到剪贴板！', 'success'))
            .catch(err => {
                console.error('现代 API 复制失败:', err);
                showMessage('复制失败，请重试。', 'error');
            });
    });
} else {
    // 如果不支持，回退到传统方法
    copyButton.addEventListener('click', () => {
        const textToCopy = myInput.value;
        if (!textToCopy) {
            showMessage('输入框是空的，没有内容可复制！', 'error');
            return;
        }
        const textarea = document.createElement('textarea');
        textarea.value = textToCopy;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.select();
        try {
            const successful = document.execCommand('copy');
            if (successful) {
                showMessage('内容已成功复制到剪贴板！', 'success');
            } else {
                showMessage('复制失败，请重试。', 'error');
            }
        } catch (err) {
            console.error('传统 API 复制失败:', err);
            showMessage('复制失败，请重试。', 'error');
        }
        document.body.removeChild(textarea);
    });
}
function showMessage(msg, type) {
    message.textContent = msg;
    message.style.color = type === 'success' ? '#28a745' : '#dc3545';
    setTimeout(() => {
        message.textContent = '';
    }, 3000);
}

总结与建议

方法 优点 缺点 推荐场景
navigator.clipboard 语法简洁、代码优雅、是官方标准、支持异步 在非 HTTPS 环境或 iframe 中可能受限 所有现代项目，首选方法
document.execCommand 兼容性极好，支持非常古老的浏览器 已废弃、同步执行、代码繁琐、用户体验不佳 维护旧项目，需要兼容 IE11 等浏览器
结合法 兼容性最好，代码健壮 代码量稍多，逻辑稍复杂 对兼容性要求极高的生产环境

给你的建议：

  • 如果你正在开发一个新的网站或应用，请直接使用 方法一 (navigator.clipboard)，它是未来，也是目前最简单、最优雅的解决方案。
  • 如果你需要支持 Internet Explorer 11 (IE11)，那么请使用 方法三（结合法）,因为它能确保在所有浏览器上都能正常工作。
  • 方法二 (execCommand) 了解即可，除非你维护的旧项目还在用它,否则不建议在新代码中使用。

希望这份详细的图文教程能帮助你彻底掌握 JS 复制 Input 内容的技能！