将谷歌翻译用于多语言文本区域

Question

当我从下拉菜单中选择一种语言时，我可以通过页面刷新成功地做到这一点。但是当我想在不刷新的情况下使用 ajax.it 时会出错。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    

<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>
<br/>
    <script>
           $("#langpair").change(function() {
        var data = this.value;
var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
    });
    </script>

Console.log(c) 给出[[object Object].HINDI]。

changelanguage.php 将类似 HINDI 的语言名称返回为 data

检查 dis Demo 链接。

请帮忙。 谢谢

Answer 1

实际上，您现在已经提出了一个单独的问题。最初，您的问题是关于如何访问LanguageCode enum 的属性

您的新问题是“现在我可以做到这一点，如何动态更改音译控件的目标语言？”

您删除和重新添加 textarea 的方法可行，但没有必要。

音译为此提供了一种方法：.setLanguagePair(sourceLanguage, destinationLanguage)

更高效的方法是 transliterate 加载元素，然后根据用户的选择动态更改语言，如下所示：

var options = {
  shortcutKey: 'ctrl+g',
  transliterationEnabled: true,
  sourceLanguage: 'en',
  destinationLanguage: ['or'],// set it to anything to start, it wont be visible anyway
};
var control = new google.elements.transliteration.TransliterationControl(options);
 control.makeTransliteratable(['message']);

$("#langpair").change(function() {
  $('#message').css('display','block');
  var data = this.value;
  $("#language_name").text(data);
  var destinationLanguage = google.elements.transliteration.LanguageCode[data];
  control.setLanguagePair('en', destinationLanguage);
});

See this updated Codepen

---

回答您原来的问题

要使用保存在变量中的字符串访问对象属性，可以使用对象键语法而不是点表示法。

将您的代码更改为：

var c = [google.elements.transliteration.LanguageCode[data]];

请注意，不再需要 var a 和 var b

Answer 2

我在选择下拉菜单时重新创建了 textarea。它现在工作正常。可能这段代码会帮助其他人。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    
<span id="language_name"></span>
<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<span id="language_area"></span>
<br/>
<script>
    $("#langpair").change(function() {
        var end = this.value;
        //document.getElementById("message").value = "";
        $("#language_area").html("");
        $.ajax({
            type: 'POST',
            async: false,
            data: {data: end},
            url: "changelanguage.php",
            success: function(data)
            {
                $("#language_area").html('<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>');
                $("#language_name").html(data);
                var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
            }
        });
    });
</script> 

这里的 id 是 demo。但是如果不在每个单词后按空格以及粘贴文本，它就不起作用。