使用谷歌翻译的多语言文本区域

Using Google Translate for multilingual textarea

本文关键字：语言 文本 区域 谷歌 翻译      更新时间：2023-09-26

当我从下拉列表中选择一种语言时，我能够通过页面刷新成功地做到这一点。但当我想在不使用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>

log（c）给出了[[object Object].HINDI]。

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

检查dis-Demo链接。

请帮忙。感谢

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

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

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

Translaterate为此提供了一种方法：.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);
});

查看此更新的Codepen

回答您最初的问题

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

将您的代码更改为：

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

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

当选择下拉菜单时，我重新创建了文本区域。现在工作正常。也许这个代码会帮助其他人。

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

这是演示。但如果不在每个单词后面按空格以及粘贴文本，它就无法工作。

相关文章：