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>

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

要求

当用户在英文文本框中输入英文单词时，英文单词将保持不变，但在英文文本框中的按键事件中，转换后的印地语版本应出现在印地文文本框中。 < / p>

所以绝不会在英文文本框中改变这个值。它应该只是英文版，只有翻译的印地文版本会出现在“印地文文本框”上。

我试过像 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

从英语（sourceLanguage）转换为您的语言，然后将您的目标语言（如Hindi表示为hi，将gujarati表示为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 Translator Api将转换后的英文文本设置为另一个文本框？

4 个答案: