文本区域更新后复制到剪贴板按钮消失问题求助

问题根源 #

1. 按钮消失原因：提交时调用$('#result').text(name)会完全替换#result容器内的所有内容（包括按钮元素），导致按钮被删除。
2. 复制功能失效：原复制JS代码试图获取input.text元素，但HTML中不存在该元素，同时原逻辑依赖输入框的select()方法，和当前文本展示方式不匹配。

修复方案 #

1. 调整HTML结构 #

在#result容器内新增一个专门用于展示问候语的元素，和按钮分开，避免替换内容时影响按钮：

<div class="copy-text" id="result">
  <span id="greeting-text"></span>
  <button><i class="fa fa-clone"></i></button>
</div>

2. 修改问候语生成逻辑 #

只更新新增的文本容器内容，不改动整个#result的子元素：

$(document).ready(function() {
    var greeting = function() {
            var name = $('#enterName').val();
            var greetingText = 'Hi there, ' + name;
            $('#greeting-text').text(greetingText);
        };

    $('#submit_this').click(function() {
        greeting();
    });
});

3. 修复复制功能逻辑 #

适配新的文本展示方式，直接选中span内的文本内容完成复制：

let copyText = document.querySelector(".copy-text");
copyText.querySelector("button").addEventListener("click", function () {
    // 获取问候语文本元素
    const greetingElement = copyText.querySelector("#greeting-text");
    // 创建临时选区复制文本
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(greetingElement);
    selection.removeAllRanges();
    selection.addRange(range);
    
    try {
        document.execCommand("copy");
        copyText.classList.add("active");
        setTimeout(function () {
            copyText.classList.remove("active");
        }, 2500);
    } catch (err) {
        console.error("复制失败:", err);
    }
    // 清除选区
    selection.removeAllRanges();
});

4. 调整CSS适配布局 #

确保新增的文本元素和按钮在flex布局中合理排列：

.copy-text #greeting-text {
    padding: 10px;
    font-size: 18px;
    color: #555;
    flex: 1; /* 让文本占满剩余空间 */
}

完整修改后的代码 #

HTML #

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Greeting Generator</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<form>
<div>Your name:</div>
<input name="enterName" id="enterName" type="text">
<div style="margin-top:10px;" class="submit">
<input value="submit" id="submit_this" type="button">
</div>
</form>
<br>
<div class="copy-text" id="result">
  <span id="greeting-text"></span>
  <button><i class="fa fa-clone"></i></button>
</div>

<script>
$(document).ready(function() {
    var greeting = function() {
            var name = $('#enterName').val();
            var greetingText = 'Hi there, ' + name;
            $('#greeting-text').text(greetingText);
        };

    $('#submit_this').click(function() {
        greeting();
    });
});
</script>

<script>
let copyText = document.querySelector(".copy-text");
copyText.querySelector("button").addEventListener("click", function () {
    const greetingElement = copyText.querySelector("#greeting-text");
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(greetingElement);
    selection.removeAllRanges();
    selection.addRange(range);
    
    try {
        document.execCommand("copy");
        copyText.classList.add("active");
        setTimeout(function () {
            copyText.classList.remove("active");
        }, 2500);
    } catch (err) {
        console.error("复制失败:", err);
    }
    selection.removeAllRanges();
});
</script>
</body>
</html>

CSS #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
    background: #F7EDE2;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.label {
    padding: 10px;
    font-size: 18px;
    color: #111;
}
.copy-text {
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
}
.copy-text #greeting-text {
    padding: 10px;
    font-size: 18px;
    color: #555;
    flex: 1;
}
.copy-text button {
    padding: 10px;
    background: #5784f5;
    color: #fff;
    font-size: 18px;
    border: none;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
}

.copy-text button:active {
    background: #809ce2;
}
.copy-text button:before {
    content: "Copied";
    position: absolute;
    top: -45px;
    right: 0px;
    background: #5c81dc;
    padding: 8px 10px;
    border-radius: 20px;
    font-size: 15px;
    display: none;
}
.copy-text button:after {
    content: "";
    position: absolute;
    top: -20px;
    right: 25px;
    width: 10px;
    height: 10px;
    background: #5c81dc;
    transform: rotate(45deg);
    display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
    display: block;
}
footer {
    position: fixed;
    height: 50px;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #5784f5;
    color: white;
    text-align: center;
}
footer p {
    margin: revert;
    padding: revert;
}

内容的提问来源于stack exchange，提问作者Darragh