如何实现点击提交按钮时才获取完整用户输入文本？

实现步骤 #

• 取消原有的input事件监听（无需实时响应每一次字符输入）
• 创建提交按钮并绑定click事件
• 在点击事件中直接读取输入框的value属性（这就是完整的输入字符串）
• 用该值设置body的背景色

修改后的JavaScript代码 #

// 创建输入框
const inputField = document.createElement(`input`);
inputField.type = `text`;
inputField.placeholder = "输入颜色值（如red、#ff0000）";

// 创建提交按钮
const submitBtn = document.createElement(`button`);
submitBtn.textContent = "设置背景色";

// 将输入框和按钮添加到页面的green区域（确保能在页面上看到）
const greenSection = document.querySelector('.green');
greenSection.appendChild(inputField);
greenSection.appendChild(submitBtn);

// 按钮点击事件处理
submitBtn.addEventListener(`click`, () => {
    const colorValue = inputField.value.trim();
    if (colorValue) { // 避免空输入导致异常
        document.body.style.backgroundColor = colorValue;
        console.log("当前设置的背景色：", colorValue);
    }
});

关键说明 #

1. 获取完整输入：输入框的value属性本身就存储了当前的完整输入内容，不需要通过input事件逐个字符拼接。
2. 触发时机控制：仅在用户点击按钮时执行修改操作，完全符合你的需求。
3. 异常防护：通过trim()去除首尾空格，再加非空判断，避免无效输入导致背景色异常。
4. 元素挂载：必须将创建的输入框和按钮添加到页面DOM中，否则用户看不到也无法操作这些元素。

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