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

后端 未结 4 1320
萌比男神i
萌比男神i 2021-02-06 19:26

I have two text box one for English another for Hindi, when i type in English on first box, the texts should appear as Hindi version on the second box (on key up event).

相关标签:
4条回答
  • 2021-02-06 19:42

    You'd want to copy the text from the English field to the Hindi field, and then apply the Google Translate to the Hindi field only. Once the text is copied from the English field, there is no reason to manipulate the English field further. Something like:

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

    At which point Google Translate should change the English text in the txtHindi box to Hindi.

    EDIT: You'll also want to change your control.makeTransliteratable(["txtEnglish"]); to control.makeTransliteratable(["txtHindi"]); to produce the translation.

    0 讨论(0)
  • 2021-02-06 19:49
    <!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>
    
    0 讨论(0)
  • 2021-02-06 19:53

    Convert from English (sourceLanguage) to your Langunage, Then Pass your destination language like Hindi for hi, gujarati for gu, Type into the editor text will converted to your language

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

    Complete Example :

          <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>
    
    0 讨论(0)
  • 2021-02-06 20:05
    <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>
    

    0 讨论(0)
提交回复
热议问题