Menu
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).
I have referred an example How Can Translate English To Hindi through Google API in Your Website, and tried to modify the one a bit as per the requirement which is presented below
<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>
But this code is working only on the "English Text" textbox. It translates the English words to Hindi only when I press the spacebar on the same.
The requirement is: when user type words in English in English Text box, the English words will remain as it is but on key down event in the English Textbox the converted Hindi version should appear on the Hindi Textbox.
So in no way, the value should get change in the English text box.It should be English only and only the translated Hindi version will appear on the "Hindi Textbox".
I tried like
document.getElementById("txtHindi").value = document.getElementById("txtEnglish").value;
but didn't work.
I have also placed the output of the solution presented here by @Suresh which is as under
463
<!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>
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
