如何将HTML textarea值传递至谷歌翻译页面？按钮问题排查

核心问题原因 #

1. 翻译按钮类型错误：使用type="submit"会触发表单默认提交行为，导致页面刷新、表单内容清空，同时中断跳转逻辑，因此需要点击第二次才能完成跳转。
2. 未实现参数传递逻辑：原translate函数仅对无效元素做操作，没有将文本、语言参数传递到谷歌翻译的逻辑。
3. HTML结构混乱：body标签嵌套在表格单元格内属于无效结构，重复的onload事件会导致逻辑冲突。

修复后的完整代码 #

<form id="p4form">
  <!-- 补充原代码缺失的基础输入元素 -->
  <tr>
    <td>查找内容:</td>
    <td><input type="text" id="f" placeholder="输入要查找的文本"></td>
  </tr>
  <tr>
    <td>替换内容:</td>
    <td><input type="text" id="r" placeholder="输入替换文本"></td>
  </tr>
  <tr>
    <td>待处理文本:</td>
    <td><textarea id="message" rows="5" cols="50">请输入或编辑文本</textarea></td>
  </tr>
  <tr>
    <td></td>
    <td>
      <button type="button" onclick="dataSearch()">查找替换</button>
      <span id="d"></span><br><br>
    </td>
  </tr>
  <tr>
    <!-- 源语言选择 -->
    <td>源语言:</td>
    <td>
      <select name="language" id="sourceLang">
        <option value="en" selected>English</option>
        <option value="ms">Malay</option>
      </select>
    </td>
  </tr>
  <tr>
    <!-- 目标语言单选 -->
    <td>目标语言:</td>
    <td>
      <input type="radio" name="targetLang" value="en" id="eng">English
      <input type="radio" name="targetLang" value="zh-CN" id="chi">Chinese
      <input type="radio" name="targetLang" value="ms" id="mal">Malay
      <input type="radio" name="targetLang" value="ja" id="jap">Japanese
      <input type="radio" name="targetLang" value="ko" id="kor" checked>Korean
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="button" id="button2" value="翻译" onclick="translate()" target="_blank">
      <input type="button" value="重置" onclick="resetform()">
    </td>
  </tr>
</form>

<script>
function dataSearch() {
  var f = document.getElementById("f").value;
  var reg = new RegExp(f, "g");
  var r = document.getElementById("r").value;
  var m = document.getElementById("message").value;
  var count = 0;

  var msg = m.replace(reg, z => {
    count++;
    return r;
  });
  document.getElementById("message").value = msg;
  document.getElementById("d").innerHTML = `替换次数：${count}`;
}

function translate() {
  // 获取待翻译文本并编码
  var text = encodeURIComponent(document.getElementById("message").value);
  // 获取源语言标准代码
  var sourceLang = document.getElementById("sourceLang").value;
  // 获取选中的目标语言标准代码
  var targetLang = document.querySelector('input[name="targetLang"]:checked').value;
  
  // 构造谷歌翻译URL，传递参数直接加载翻译内容
  var translateUrl = `https://translate.google.com/?sl=${sourceLang}&tl=${targetLang}&text=${text}&op=translate`;
  // 在新窗口打开翻译页面
  window.open(translateUrl, "_blank");
}

function resetform() {
  document.getElementById("p4form").reset();
  document.getElementById("d").innerHTML = "";
}
</script>

关键修复点说明 #

• 修改按钮类型：将翻译按钮的type="submit"改为type="button"，避免触发表单默认提交刷新。
• 标准化语言代码：将源语言、目标语言的选项值替换为谷歌翻译支持的标准代码（如英文en、中文zh-CN等）。
• 构造翻译URL：通过谷歌翻译的URL参数sl（源语言）、tl（目标语言）、text（待翻译文本）直接传递内容，打开页面即可自动加载文本并完成翻译。
• 修复HTML结构：移除嵌套在表格内的body标签，整理表单结构，确保语义合规。

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