如何为 Chrome 扩展中的输入框添加回车键触发功能

在 chrome 扩展的弹出页中，为 `` 绑定 enter 键事件时，若外层包裹了 `

  
    ETH
    BTC
    SOL
  


  →
  
    BTC
    ETH
    SOL
    USD
  


  


  Convert

同时，JavaScript 中的事件监听已基本正确，但建议增强健壮性：

WPS AI

金山办公发布的AI办公应用，提供智能文档写作、阅读理解和问答、智能人机交互的能力。

下载

• 使用 keyup 替代 keydown 可避免部分浏览器中 Enter 键重复触发问题；
• 添加 event.preventDefault() 虽在无
  时非必需，但属良好实践；
• 对空值/非法输入做基础校验，防止无效请求。

优化后的 JS 示例：

document.getElementById("convertButton").addEventListener("click", convert);
document.getElementById("amount").addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    event.preventDefault(); // 显式阻止潜在默认行为
    convert();
  }
});

function convert() {
  const amountInput = document.getElementById("amount");
  const amount = parseFloat(amountInput.value);

  if (isNaN(amount) || amount <= 0) {
    document.getElementById("result").textContent = "Please enter a valid positive number.";
    return;
  }

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

  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.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'}`;
      console.error(err);
    });
}

⚠️ 注意事项：

• Manifest V3 下确保 popup/ccc.html 路径与 manifest.json 中声明完全一致（大小写、斜杠）；
• popup2.js 必须在 DOM 加载完成后执行（当前放在