使用 Google 翻译多语言文本区域

Question

当我 select 从下拉列表中选择一种语言时，我能够通过页面刷新成功做到这一点。但是当我想要相同而不用 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 return 语言名称如印地语 data

检查dis Demo link。

请帮忙。谢谢

Answer 1

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

的属性

你的新问题是"Now that I can do that, how do I dynamically change the destination language of the transliterated control?"

您删除并重新添加文本区域的方法可行，但没有必要。

Transliterate 为此提供了一种方法：.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

当下拉菜单为 selected.it 时，我重新创建了文本区域 selected.it 工作正常 now.May 这段代码会帮助其他人。

<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>

这里是 demo。但是如果不在每个单词后按 space 以及在粘贴文本时按 space 就无法工作。

使用 Google 翻译多语言文本区域

Using Google Translate for multilingual textarea

javascript

jquery

google-translate

translate

See this updated Codepen