使用谷歌翻譯來翻譯另一個文本域的語言內容

Question

所以我有一個基本的字母翻譯，我手動創建。它將一個字母翻譯成西裏爾字母，你手動按下並將其吐出到一個文本字段中（我把它編號爲'alphabet_output'）。我的工作主要是我希望如何。

我希望西里爾文變成拉丁字母，英文。我希望在第二個文本字段（我將它標識爲'english_output'）中發生這種情況，最好在第一個文本字段（alphabet_output）中檢測到某些內容時自動執行此操作。

但是我身邊有API的不知道，我看到與此相關的問題，大部分問題似乎是基於API谷歌不再支持。

這裏是codepen：https://codepen.io/erik-b/pen/bqbjVV

HTML：

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<input type="button" value="Ⰰ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰱ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰲ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰳ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰴ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰵ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰶ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰷ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰸ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰺ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰻ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰼ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰽ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰾ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⰿ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱀ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱁ" name="no" onclick="moveCharacters(this.value)"> 
<br><br> 
<input type="button" value="Ⱂ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱃ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱄ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱅ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱆ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱇ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱈ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱉ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱋ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱌ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱍ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱏ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱐ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱑ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱖ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱓ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱔ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱗ" name="no" onclick="moveCharacters(this.value)"> 
<br><br> 
<input type="button" value="Ⱘ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱙ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱚ" name="no" onclick="moveCharacters(this.value)"> 
<input type="button" value="Ⱛ" name="no" onclick="moveCharacters(this.value)"> <br> 

<h3>Glagolitic</h3> 
<form> 
    <input id='alphabet' type='text' value=''> 
</form> 
<br> 
<input onclick='glagolitic()' type='button' value='Translate'><br> 
<br><br> 

<h3>Cyrillic</h3> 
<textarea id='alphabet_output' rows='15' cols='100'> 
</textarea> 
<br><br> 

<h3>English</h3> 
<div id="google_translate_element"> 
    <textarea id='english_output' rows='15' cols='100'></textarea> 

</div> 

的Javascript：

function moveCharacters(num) { 
    var txt=document.getElementById("alphabet").value; 
    txt=txt + num; 
    document.getElementById("alphabet").value=txt; 
    } 
var mapObj = { 
    Ⰰ: "А", 
    ⰰ: "а", 
    Ⰱ: "Б", 
    ⰱ: "б", 
    Ⰲ: "В", 
    ⰲ: "в", 
    Ⰳ: "Г", 
    ⰳ: "г", 
    Ⰴ: "Д", 
    ⰴ: "д", 
    Ⰵ: "Є", 
    ⰵ: "є", 
    Ⰶ: "Ж", 
    ⰶ: "ж", 
    Ⰷ: "Ѕ", 
    ⰷ: "ѕ", 
    Ⰸ: "З", 
    ⰸ: "з", 
    Ⰹ: "И", 
    ⰹ: "и", 
    Ⰺ: "Й", 
    ⰺ: "й", 
    Ⰻ: "І", 
    ⰻ: "i", 
    Ⰼ: "Ћ", 
    ⱞ: "ћ", 
    Ⰽ: "К", 
    ⰽ: "k", 
    Ⰾ: "Л", 
    ⰾ: "Л", 
    Ⰿ: "М", 
    ⰿ: "m", 
    Ⱀ: "Н", 
    ⱀ: "h", 
    Ⱁ: "О", 
    ⱁ: "o", 
    Ⱂ: "П", 
    ⱂ: "п", 
    Ⱃ: "Р", 
    ⱃ: "p", 
    Ⱄ: "С", 
    ⱄ: "c", 
    Ⱅ: "Т", 
    ⱅ: "t", 
    Ⱆ: "У", 
    ⱆ: "у", 
    Ⱇ: "Ф", 
    ⱇ: "ф", 
    Ⱈ: "Х", 
    ⱈ: "x", 
    Ⱉ: "Ѡ", 
    ⱉ: "ѡ", 
    Ⱋ: "Щ", 
    ⱋ: "щ", 
    Ⱌ: "Ц", 
    ⱌ: "ц", 
    Ⱍ: "Ч", 
    ⱍ: "ч", 
    Ⱎ: "Ш", 
    ⱎ: "ш", 
    Ⱏ: "Ъ", 
    ⱏ: "ъ", 
    Ⱐ: "Ь", 
    ⱐ: "ь", 
    Ⱑ: "Ѣ", 
    ⱑ: "ѣ", 
    Ⱖ: "Ё", 
    ⱖ: "Ё", 
    Ⱓ: "Ю", 
    ⱓ: "Ю", 
    Ⱔ: "Ѧ", 
    ⱔ: "ѧ", 
    Ⱗ: "Ѩ", 
    ⱗ: "ѩ", 
    Ⱘ: "Ѫ", 
    ⱘ: "ѫ", 
    Ⱙ: "Ѭ", 
    ⱙ: "ѭ", 
    Ⱚ: "Ѳ", 
    ⱚ: "ѳ", 
    Ⱛ: "Ѵ", 
    ⱛ: "v", 
}; 

function glagolitic() { 
    var str = document.getElementById('alphabet').value; 
    var re = new RegExp(Object.keys(mapObj).join("|"), "g"); 
    str = str.replace(re, function(matched) { 
    return mapObj[matched.valueOf()]; 
    }); 
    document.getElementById('alphabet_output').innerHTML = str; 
} 

Answer 1

您可以使用谷歌翻譯API書面Here，但你必須在谷歌啓用結算雲平臺項目

您可以使用Translitered API，但如前所述here

在最後一種情況下，你可以使用谷歌翻譯工具，它的棄用。 Here你能找到一個代碼片段嗎？

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Translate Test</title> 
</head> 
<body> 
    <div class="destination"> 
     <p>This is some text already on the page that could be translated by the Google Translate Web Element. <a href="#" class="loadMore">Load More</a></p> 
    </div> 
    <div id="google_translate_element"></div> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function googleTranslateElementInit() { 
      new google.translate.TranslateElement({ pageLanguage: "en" }, "google_translate_element"); 
     }; 

     $(function() { 
      $(".loadMore").click(function() { 
       $("<p/>", { 
        text: "This is some injected text that will not be translated." 
       }).appendTo($(".destination")); 
      }); 
      $.getScript("//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"); 
     }); 
    </script> 
</body> 
</html>