JavaScript中页面标题持续更新失效问题求助（仅原生JS）

核心问题分析 #

1. 按键事件触发不全

   • onkeypress 仅响应字符输入类按键，退格、删除、方向键等操作不会触发它，导致标题无法同步。
   • 原代码中<input>标签放在了<html>标签外，属于无效DOM结构，需要移至<body>内部。

2. 定时器未执行

   • 你在setInterval里重复声明了changePageTitle函数，但没有实际调用它，这完全是无效写法。
   • 变量newPageTitle未用let/const声明，会污染全局作用域。

修复后的完整代码 #

<html>
<head>
  <title>please choose title</title>
</head>
<body>
  <input type="text" id="title" size="150" oninput="changePageTitle()">
  <br>
  <button onclick="changePageTitle()">Change Page Title</button>

  <script type="text/javascript">
    function changePageTitle() {
      const newPageTitle = document.getElementById('title').value;
      document.title = newPageTitle;
    }
    // 每秒调用一次标题更新函数
    const interval = setInterval(changePageTitle, 1000);
  </script>
</body>
</html>

关键优化点 #

• 改用oninput事件：捕获输入框所有内容变化场景，包括粘贴、退格等操作，比onkeypress更可靠。
• 定时器直接传入函数名：无需额外包裹匿名函数，简洁且正确触发函数执行。
• 声明变量作用域：用const声明newPageTitle，避免全局变量污染。
• 若后续需要停止自动更新，可调用clearInterval(interval)。

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