程序员经验分享-hwhale

如何使用 Google Translator Api 将转换后的英文文本设置到另一个文本框？

2024-02-13

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

我已经提到了一个例子如何在您的网站中通过 Google API 将英语翻译成印地语 http://arunsonare.blogspot.in/2013/04/how-can-translate-english-to-hindi.html，并尝试根据下面提出的要求稍微修改一下

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

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

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

因此，无论如何，该值都不应该在英文文本框中发生变化。它应该只是英文，并且只有翻译后的印地语版本才会出现在“印地语文本框”上。

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

但没有用。

Edit

我还放置了@Suresh 此处提出的解决方案的输出，如下所示


<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

translate

如何使用 Google Translator Api 将转换后的英文文本设置到另一个文本框？ 的相关文章

随机推荐

热门标签