如何在输入时将input.value保存到全局变量currentInput中？

要实现输入时实时把input的value存到全局变量currentInput，核心是监听输入事件并同步赋值，下面是优化后的可行方案：

完整代码示例 #

HTML部分

<h1>Check if your text is a Palindrome:</h1>
<div id="palindrome-checker">
  <p>Enter your text</p>
  <form id="palindrome-form">
    <input type="text" id="text-input" required value="">
    <button type="button" id="check-btn">Enter</button>
  </form>
  <div id="result"></div> <!-- 补充结果展示容器 -->
</div>

JavaScript部分

// 全局变量声明，确保作用域覆盖所有需要使用的地方
let currentInput = "";

// 提前获取DOM元素，避免重复查询
const input = document.querySelector("#text-input");
const button = document.querySelector("#check-btn");
const output = document.querySelector("#result");

// 监听input的输入事件，覆盖所有输入场景（键盘输入、粘贴、输入法选词等）
input.addEventListener('input', updateCurrentInput);

function updateCurrentInput() {
  // 直接用已获取的input元素取值，提升性能
  currentInput = input.value;
}

// 示例：点击按钮时使用全局变量currentInput
button.addEventListener('click', () => {
  // 这里可以用currentInput做回文判断等操作
  output.textContent = `当前输入内容：${currentInput}`;
});

关键说明 #

• 全局变量作用域：currentInput用let在全局作用域声明，确保后续所有函数（比如按钮点击回调）都能访问到最新值。
• 事件选择：用input事件替代原代码的keyup，因为keyup会漏掉非键盘触发的输入（比如右键粘贴、输入法候选词确认），input事件能覆盖所有输入变更场景。
• 性能优化：提前获取input元素，避免在每次输入时重复调用document.querySelector，减少DOM查询开销。

验证方法 #

你可以打开浏览器控制台，在输入文本时直接输入currentInput回车，就能看到变量实时同步了输入框的值；点击按钮也能看到结果区域展示当前输入内容。

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