Javascript 如何使用 Google Translator Api 将转换后的英文文本设置为另一个文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34688865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set the converted English text to another textbox using Google Translator Api?
提问by priyanka.sarkar
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
我参考了一个示例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>
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 likedocument.getElementById("txtHindi").value = document.getElementById("txtEnglish").value;
我试过document.getElementById("txtHindi").value = document.getElementById("txtEnglish").value;
but didn't work.
但没有用。
Edit
编辑
I have also placed the output of the solution presented here by @Suresh which is as under
我还放置了@Suresh 在此处提供的解决方案的输出，如下所示
回答by 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>
回答by Glen Despaux Jr
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:
您可能希望将文本从英语字段复制到印地语字段，然后仅将 Google 翻译应用于印地语字段。一旦从英文字段复制文本，就没有理由进一步操纵英文字段。就像是：
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 txtHindibox to Hindi.
此时谷歌翻译应该将txtHindi框中的英文文本更改为印地语。
EDIT: You'll also want to change your control.makeTransliteratable(["txtEnglish"]);to control.makeTransliteratable(["txtHindi"]);to produce the translation.
编辑：您还需要更改您的control.makeTransliteratable(["txtEnglish"]);tocontrol.makeTransliteratable(["txtHindi"]);以生成翻译。
回答by Ghanshyam Nakiya
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
从英语 (sourceLanguage) 转换为您的语言，然后通过您的目标语言，如印地语为 hi，古吉拉特语为 gu，在编辑器中输入文本将转换为您的语言
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>
回答by Abds
<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>
