jquery点击按钮复制文本框内容

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以方便地实现页面上的各种动态效果和交互功能。

类型

jQuery 主要分为两个版本：

完整版：包含所有功能，适用于需要完整功能的场景。
压缩版：去除注释和空格，体积更小，适用于生产环境。

应用场景

jQuery 广泛应用于各种网页开发中，包括但不限于：

动态效果（动画、滚动、弹窗等）
表单验证
DOM 操作
Ajax 交互

示例代码

以下是一个使用 jQuery 实现点击按钮复制文本框内容的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Copy Text Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="myInput" value="这是要复制的文本">
    <button id="copyButton">复制文本</button>

    <script>
        $(document).ready(function() {
            $('#copyButton').click(function() {
                // 获取文本框的值
                var text = $('#myInput').val();
                // 创建一个临时的 textarea 元素
                var tempTextarea = $('<textarea></textarea>');
                tempTextarea.val(text);
                $('body').append(tempTextarea);
                // 选中并复制文本
                tempTextarea.select();
                document.execCommand('copy');
                // 移除临时 textarea 元素
                tempTextarea.remove();
                alert('文本已复制到剪贴板！');
            });
        });
    </script>
</body>
</html>