如何在运行时从用户获取此字符串？

Question

看下面的代码，此JavaScript用于获取字符串（英语以外的语言）并将其转换为英语。

<script type="text/javascript">
    google.load("language", "1");

    function initialize() {
       var content = document.getElementById('translation');
       // Setting the text in the div.
       content.innerHTML = '<div id="text">HELLO WORLD<\/div>
                            <div id="translation"/>';

       // Grabbing the text to translate
       var text = document.getElementById("text").innerHTML;

       // Translate from Spanish to English, and have the callback of
       // the request put the resulting translation in the
       // "translation" div.  Note: by putting in an empty string for
       // the source language ('es') then the translation will
       // auto-detect the source language.

       google.language.translate(text, '', 'en', function(result) {
       var translated = document.getElementById("translation");
       if (result.translation) {
           translated.innerHTML = result.translation;
       }
     });
   }

   google.setOnLoadCallback(initialize);

</script>

我希望用户在运行时必须在文本字段中输入字符串“ HELLO WORLD”，然后将该字符串传递给div id文本。 那有可能吗？

Answer 1

希望您参考以下文档：

http://code.google.com/apis/language/translate/v1/getting_started.html

请参阅“入门”部分中有关“注册API密钥”的内容。 必须先完成此操作，然后才能在页面中实现代码。

完成后，用您的密钥对包含在html页面中的脚本文件进行修改。

在这里，用底部代码中的“ MY_KEY_STRING”替换密钥，然后开始使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Language API Sample</title>
    <script src="https://www.google.com/jsapi?key=MY_KEY_STRING"></script>
    <script type="text/javascript">

    google.load("language", "1");

    function initialize() {
    //Show the translate button
    document.getElementById("translateButton").style.display = "";
     }
    google.setOnLoadCallback(initialize);
    function translate() {
    var text = document.getElementById("fromText").value;
        google.language.translate(text, 'es', 'en', function(result) {
        var translated = document.getElementById("toText");
        if (result.translation) {
          translated.innerHTML = result.translation;
        }
      });
    }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    From:<input type="text" id="fromText"/>
    To:<span id="toText"></span>
    <input type="button" value="Translate" onclick="translate()" style="display: none;" id="translateButton">
  </body>
</html>

Answer 2

HTML：

<form id="translate">
  <textarea id="translate-me"></textarea>
  <input type="submit" />
</form>

JavaScript：

var form = document.getElementById('translate')
var textarea = document.getElementById('translate-me')

form.onsubmit = function () {
  google.language.translate(textarea.value, ...)
  return false; // prevent default action (form submission)
}

当然，使用jQuery或类似的东西会使它更容易。