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

时间:2011-10-22 05:18:53

标签: javascript api

请查看以下代码,此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文本。这可能吗?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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或类似的东西会使这更容易。