如何为 Chrome 扩展中的输入框绑定回车键触发事件

在 chrome 扩展的弹窗页面中，若使用 `

以下是优化后的 HTML 片段（关键修改已高亮）：

<!-- 移除 <form> 开始标签 -->
<div class="convertFrom">
  <select id="convertFrom">
    <option value="ETH">ETH</option>
    <option value="BTC">BTC</option>
    <option value="SOL">SOL</option>
  </select>
</div>
<div class="convertTo">
  →
  <select id="convertTo">
    <option value="BTC">BTC</option>
    <option value="ETH">ETH</option>
    <option value="SOL">SOL</option>
    <option value="USD">USD</option>
  </select>
</div>
<div class="amountToConvert">
  <input type="number" placeholder="0.05" id="amount" autofocus required>
</div>
<div class="convertButton">
  <button type="button" id="convertButton">Convert</button>
</div>
<!-- 移除 </form> 结束标签 -->
<div id="result"></div>
<script src="popup2.js"></script>

同时，JavaScript 部分建议增强容错性与用户体验：

PpcyAI

泡泡次元AI-游戏美术AI创作平台，低门槛上手，高度可控，让你的创意秒速落地

下载

• 使用 event.key === 'Enter' 是可靠的（兼容现代 Chrome）；
• 可额外调用 event.preventDefault()（虽无表单提交，但属良好实践）；
• 推荐将事件监听统一写在 DOM 加载完成后，避免元素未就绪；
• 为防止重复点击/触发，可临时禁用按钮或添加加载状态（进阶优化）。

示例改进版 JS（popup2.js）：

// 确保 DOM 加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const amountInput = document.getElementById('amount');
  const convertBtn = document.getElementById('convertButton');

  // 回车触发转换
  amountInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault(); // 显式阻止任何潜在默认行为
      convert();
    }
  });

  // 按钮点击触发
  convertBtn.addEventListener('click', convert);

  function convert() {
    const convertFrom = document.getElementById('convertFrom').value;
    const convertTo = document.getElementById('convertTo').value;
    const amount = parseFloat(amountInput.value);

    // 基础校验
    if (!amount || isNaN(amount) || amount <= 0) {
      document.getElementById('result').textContent = 'Please enter a valid amount.';
      return;
    }

    const url = `https://min-api.cryptocompare.com/data/price?fsym=${convertFrom}&tsyms=${convertTo}`;

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(data => {
        const rate = data[convertTo];
        if (rate === undefined) throw new Error('Invalid conversion pair');
        const result = (amount * rate).toFixed(4);
        document.getElementById('result').innerHTML = 
          `${amount} ${convertFrom} = ${result} ${convertTo}`;
      })
      .catch(err => {
        document.getElementById('result').innerHTML = 
          `Error: ${err.message || 'Failed to fetch rate'}`;
      });
  }
});

⚠️ 注意事项：

• 不要在 popup 中使用
  ，除非你主动监听 submit 事件并调用 preventDefault() —— 但本场景完全无需表单语义；
• Chrome 扩展 popup 生命周期较短，避免长时间阻塞主线程（如未加 loading 状态的频繁请求）；
• API 调用需注意跨域限制：cryptocompare.com 支持 CORS，可直接调用；若换用其他接口，请确认其 CORS 策略或通过 background service worker 代理请求；
• Manifest V3 下，确保 popup2.js 已在 content_security_policy 中允许执行（默认 script-src 'self' 已满足）。

总结：移除