如何在Oracle APEX中实现text field内容翻译功能？

当然可以实现这个功能，核心是前端交互结合翻译API调用，以下是具体的实现方案：

核心逻辑 #

• 监听翻译按钮的点击事件，获取用户输入的文本和选中的目标语言
• 调用翻译接口处理文本翻译
• 将翻译结果展示到指定的文本框中

HTML结构 #

<!-- 输入文本区域 -->
<div>
  <label>输入文本:</label>
  <textarea id="inputText" rows="4" cols="50" placeholder="请输入要翻译的内容"></textarea>
</div>

<!-- 语言选择区 -->
<div>
  <label>选择目标语言:</label>
  <input type="checkbox" name="targetLang" value="es"> 西班牙语
  <input type="checkbox" name="targetLang" value="fr"> 法语
  <input type="checkbox" name="targetLang" value="de"> 德语
</div>

<!-- 操作按钮 -->
<button id="translateBtn">开始翻译</button>

<!-- 结果展示区 -->
<div>
  <label>翻译结果:</label>
  <textarea id="outputText" rows="4" cols="50" readonly></textarea>
</div>

JavaScript实现 #

// 获取页面元素
const inputText = document.getElementById('inputText');
const translateBtn = document.getElementById('translateBtn');
const outputText = document.getElementById('outputText');
const langCheckboxes = document.querySelectorAll('input[name="targetLang"]');

// 替换为真实翻译API的调用函数
async function translateText(sourceText, targetLangs) {
  let resultContent = '';
  
  // 这里以模拟翻译为例，实际开发中替换为第三方翻译API请求
  for (const lang of targetLangs) {
    // 示例：调用翻译API时，需传入源文本、目标语言、API密钥等参数
    // 这里模拟返回结果
    const langName = lang === 'es' ? '西班牙语' : lang === 'fr' ? '法语' : '德语';
    const translated = `【${langName}】${sourceText}`;
    resultContent += translated + '\n\n';
  }
  
  return resultContent.trim();
}

// 绑定翻译按钮点击事件
translateBtn.addEventListener('click', async () => {
  const text = inputText.value.trim();
  if (!text) {
    outputText.value = '请先输入要翻译的文本';
    return;
  }

  // 获取选中的语言
  const selectedLangs = Array.from(langCheckboxes)
    .filter(box => box.checked)
    .map(box => box.value);

  if (selectedLangs.length === 0) {
    outputText.value = '请至少选择一种目标语言';
    return;
  }

  // 执行翻译并展示结果
  try {
    const translatedResult = await translateText(text, selectedLangs);
    outputText.value = translatedResult;
  } catch (err) {
    outputText.value = '翻译出错了，请稍后再试';
    console.error('翻译失败:', err);
  }
});

注意事项 #

• API集成：实际项目中需要替换模拟的translateText函数，使用真实的翻译服务（比如DeepL、Google翻译等），这些服务需要申请API密钥，按照官方文档构造请求即可。
• 多语言展示：代码支持同时选择多种语言，结果会按语言分类展示，可根据需求调整格式。
• 用户体验：加入了基础的输入校验，避免空文本或未选语言时触发无效请求。

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