基于Google翻译API与JS实现输入文本同步多语言翻译

以下是修改后的完整代码，可实现输入框内容同时翻译成西班牙语和乌尔都语：

HTML 代码 #

<div class="boxes">
  <div class="box">
    <h2>输入框</h2>
    <input id="input">
  </div>
  
  <div class="box">
    <h2>西班牙语</h2>
    <input value="es" class="targee" readonly>
    <input id="es" class="translated" readonly>
  </div>
  
  <div class="box">
    <h2>乌尔都语</h2>
    <input value="ur" class="targee" readonly>
    <input id="ur" class="translated" readonly>
  </div>
</div>

CSS 代码 #

h2, h3 {
  margin: 0 auto;
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
}
.box {
  width: 30%; /* 调整宽度适配三个盒子布局 */
}

input {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 5px auto 20px;
  border-width: 2px;
  box-sizing: border-box;
  
  &:focus {
    border: 2px solid black;
    outline: none;
  }
}
.btn-row {
  text-align: center;
  margin: 10px auto;
}

JavaScript 代码 #

const $ = el => document.querySelector(el);
const $$ = el => document.querySelectorAll(el);

$('#input').addEventListener('keyup', function() {
  const text = this.value.trim();
  // 遍历所有翻译目标盒子，逐个发起请求
  $$('.box').forEach(box => {
    const targetLangInput = box.querySelector('.targee');
    const outputInput = box.querySelector('.translated');
    if (targetLangInput && outputInput) {
      doTranslate(text, targetLangInput.value, outputInput);
    }
  });
});

function doTranslate(sourceText, targetLang, outputElement) {
  if (!sourceText) {
    outputElement.value = '';
    return;
  }
  
  const sourceLang = 'en';
  const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURI(sourceText)}`;
  
  outputElement.value = '加载中...';
  const request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onload = () => {
    if (request.status >= 200 && request.status < 400) {
      const data = JSON.parse(request.responseText);
      let finalText = '';
      for (let i = 0; i < data[0].length; i++) {
        finalText += data[0][i][0];
      }
      outputElement.value = finalText;
    } else {
      outputElement.value = '翻译失败';
    }
  };
  
  request.onerror = () => {
    outputElement.value = '请求出错';
  };
  
  request.send();
}

关键修改说明 #

• 新增$$函数用于批量获取元素，遍历每个翻译目标盒子
• 重构翻译逻辑为doTranslate函数，明确接收源文本、目标语言、输出元素三个参数，确保每个翻译请求对应各自的输出框
• 为语言代码输入框添加readonly属性，避免误修改
• 调整CSS中.box宽度，适配三个盒子的横向布局
• 增加空输入判断和错误处理，优化用户体验

内容的提问来源于stack exchange，提问作者Aashish Kumar Jaiswal