如何使用 Google 翻译器 Api 将转换后的英文文本设置为另一个文本框？

Question

我有两个文本框，一个用于英语，另一个用于印地语，当我在第一个框中输入英语时，文本应在第二个框中显示为印地语版本（在按键事件中）。

我参考了一个例子How Can Translate English To Hindi through Google API in Your Website，并尝试根据下面提出的要求稍微修改一下

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script> 

<script>
function OnLoad() {                

                            var options = {
                                sourceLanguage:
                                google.elements.transliteration.LanguageCode.ENGLISH,
                                destinationLanguage:
                                [google.elements.transliteration.LanguageCode.HINDI],
                                shortcutKey: 'ctrl+g',
                                transliterationEnabled: true
                            };

                    var control = new
                    google.elements.transliteration.TransliterationControl(options);
                    control.makeTransliteratable(["txtEnglish"]);

    } //end onLoad function

    google.setOnLoadCallback(OnLoad);

</script> 


</head>
    <body>

       English Text: <input size="40" type="text" id="txtEnglish"/> <br/>
       Hindi Text : <input size="40" type="text" id="txtHindi"/> 

</body>
</html>

但是此代码仅适用于 "English Text" 文本框。只有当我按下空格键时，它才会将英文单词翻译成印地语。

要求是：当用户在英文文本框中键入英文单词时，英文单词将保持原样，但在英文文本框中按下事件时，转换后的印地语版本应出现在印地语文本框中。

所以无论如何，英语文本中的值应该改变 box.It 应该只有英语，只有翻译的印地语版本会出现在 "Hindi Textbox"。

我试过了
document.getElementById("txtHindi").value = document.getElementById("txtEnglish").value;

但没用。

编辑

我还把@Suresh 提出的解决方案的输出放在了下面

Answer 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("elements", "1", {packages: "transliteration"});
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
function OnLoad() {                
    var options = {
        sourceLanguage:
        google.elements.transliteration.LanguageCode.ENGLISH,
        destinationLanguage:
        [google.elements.transliteration.LanguageCode.HINDI],
        shortcutKey: 'ctrl+g',
        transliterationEnabled: true
    };

    var control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(["txtHindi"]);
    var keyVal = 32; // Space key
    $("#txtEnglish").on('keydown', function(event) {
        if(event.keyCode === 32) {
            var engText = $("#txtEnglish").val() + " ";
            var engTextArray = engText.split(" ");
            $("#txtHindi").val($("#txtHindi").val() + engTextArray[engTextArray.length-2]);

            document.getElementById("txtHindi").focus();
            $("#txtHindi").trigger ( {
                type: 'keypress', keyCode: keyVal, which: keyVal, charCode: keyVal
            } );
        }
    });

    $("#txtHindi").bind ("keyup",  function (event) {
        setTimeout(function(){ $("#txtEnglish").val($("#txtEnglish").val() + " "); document.getElementById("txtEnglish").focus()},0);
    });
} //end onLoad function

google.setOnLoadCallback(OnLoad);
</script> 

</head>
    <body>
       English Text: <input size="40" type="text" id="txtEnglish"/> <br/>
       Hindi Text`enter code here` : <input size="40" type="text" id="txtHindi"/> 
</body>
</html>

Answer 2

您希望将文本从英语字段复制到印地语字段，然后应用 Google 转换为 仅印地语字段。一旦从英文字段中复制了文本，就没有理由进一步操纵英文字段了。类似于：

document.getElementById("txtEnglish").addEventListener("keyup", translate);

function translate() {
 document.getElementById("txtHindi").value = document.getElementById("txtEnglish").value;
}

此时 Google 翻译应将 txtHindi 框中的英文文本更改为印地语。

编辑：您还需要将 control.makeTransliteratable(["txtEnglish"]); 更改为 control.makeTransliteratable(["txtHindi"]); 以生成翻译。

Answer 3

<script type="text/javascript">

    // Load the Google Transliterate API
    google.load("elements", "1", {
        packages: "transliteration"
    });

    function onLoad() {
        var options = {
            sourceLanguage:
            google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
            [google.elements.transliteration.LanguageCode.KANNADA],
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
        new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['ContentPlaceHolder1_txtNameInKannada']);
    }
    google.setOnLoadCallback(onLoad);
</script>

Answer 4

从英语（源语言）转换为您的语言，然后传递您的目标语言，例如印地语表示 hi，古吉拉特语表示 gu，在编辑器中输入文本将转换为您的语言

      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['gu'],
          shortcutKey: 'ctrl+m',
          transliterationEnabled: true
        }

完整示例：

      <script type="text/javascript" src="http://www.google.com/jsapi"></script>

      <script type="text/javascript">
        // Load the Google Transliteration API
        google.load("elements", "1", {
          packages: "transliteration"
        });

        function onLoad() {
          var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['gu'],
            shortcutKey: 'ctrl+m',
            transliterationEnabled: true
          }

          // Create an instance on TransliterationControl with the required options.
          var control = new google.elements.transliteration.TransliterationControl(options);

          // Enable transliteration in the textfields with the given ids.
          var ids = ["language"];
          control.makeTransliteratable(ids);

          // Show the transliteration control which can be used to toggle between English and Hindi and also choose other destination language.
          control.showControl('translControl');
        }

        google.setOnLoadCallback(onLoad);
      </script>

      <form><textarea name="ta"  rows="6"  id="language" cols="6" style="width:600px;height:218px" ></textarea></form>

如何使用 Google 翻译器 Api 将转换后的英文文本设置为另一个文本框？

How to set the converted English text to another textbox using Google Translator Api?

javascript

translate

编辑