Chrome加密货币转换器扩展：按下Enter无法触发convert函数求助

问题描述 #

开发的加密货币转换器Chrome扩展中，点击Convert按钮可正常触发convert函数，但在id为amount的数字输入框按下Enter时，输入框会重置清空、失去焦点，且未触发convert函数。需要实现点击按钮或按下Enter均可触发转换的效果。

现有代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>convertFrom Currency Converter</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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" name="convertButton">Convert</button>
            <script src="popup2.js"></script>
        </div>
    </form>
    <div id="result"></div>
    <script src="popup2.js"></script>
</body>
</html>

JavaScript代码 #

document.getElementById("convertButton").addEventListener("click", convert);

document.getElementById("amount").addEventListener("keydown", function(event) {
  if (event.key === 'Enter') {
    convert();
  }
});

function convert() {
  let convertFrom = document.getElementById("convertFrom").value;
  let convertTo = document.getElementById("convertTo").value;
  let amount = document.getElementById("amount").value;

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

  fetch(url)
    .then(response => response.json())
    .then(data => {
      let rate = data[convertTo];
      let result = amount * rate;
      document.getElementById("result").innerHTML = `${amount} ${convertFrom} = ${result.toFixed(4)} ${convertTo}`;
    })
    .catch(error => console.log(error));
}

Manifest.json代码 #

{
  "name": "Crypto Currency Converter",
  "description": "A simple crypto currency converter.",
  "version": "0.1",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup/ccc.html"
  }
}

问题原因 #

输入框被包裹在<form>标签内，按下Enter键时浏览器会触发表单的默认提交行为，导致Chrome扩展的popup页面重置，因此convert函数无法执行，同时输入框被清空、失去焦点。

修复方案及代码 #

方案一：阻止Enter键的默认表单提交行为 #

修改JavaScript中输入框的keydown事件监听，添加event.preventDefault()阻止默认行为：

document.getElementById("convertButton").addEventListener("click", convert);

document.getElementById("amount").addEventListener("keydown", function(event) {
  if (event.key === 'Enter') {
    event.preventDefault(); // 阻止表单默认提交行为
    convert();
  }
});

function convert() {
  let convertFrom = document.getElementById("convertFrom").value;
  let convertTo = document.getElementById("convertTo").value;
  let amount = document.getElementById("amount").value;

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

  fetch(url)
    .then(response => response.json())
    .then(data => {
      let rate = data[convertTo];
      let result = amount * rate;
      document.getElementById("result").innerHTML = `${amount} ${convertFrom} = ${result.toFixed(4)} ${convertTo}`;
    })
    .catch(error => console.log(error));
}

方案二：监听表单submit事件（更简洁） #

这种方式无需单独监听按钮点击和输入框按键，表单的submit事件会自动响应点击submit按钮或按下Enter键的操作：

1. 修改HTML中的按钮类型为submit：

<button type="submit" id="convertButton" name="convertButton">Convert</button>

2. 修改JavaScript代码，监听表单的submit事件并阻止默认行为：

// 监听表单提交事件
document.querySelector("form").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止默认提交行为
  convert();
});

function convert() {
  let convertFrom = document.getElementById("convertFrom").value;
  let convertTo = document.getElementById("convertTo").value;
  let amount = document.getElementById("amount").value;

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

  fetch(url)
    .then(response => response.json())
    .then(data => {
      let rate = data[convertTo];
      let result = amount * rate;
      document.getElementById("result").innerHTML = `${amount} ${convertFrom} = ${result.toFixed(4)} ${convertTo}`;
    })
    .catch(error => console.log(error));
}

两种方案都能实现点击按钮或按下Enter键触发convert函数的效果，方案二更符合表单的原生行为，代码更简洁。

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