invitation india
Type in Hindi or any other languages in HTML textarea or input bx
Learn how to create an HTML input element for typing non-English language with Google Transliterate API (Javascript + HTML).
If you are looking for a solution to typing Hindi in the html input box, then Google Transliteration API will help you to solve your problem. Google Transliteration API (jsapi) is a free JavaScript API for phonetic input that supports over 20 languages.
Phonetic input is an easy way to write Hindi or other non-English language, when you type "Namaste" and press "Space", it will change to "नमस्ते".
How do I use Google Input Tools on my website?
Enable regional or local language typing in website.
Demo:
(Press Ctrl+g to toggle between English and Hindi)
Code: Google Transliterate API Documentation
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
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);
// Enable transliteration in the textbox with id 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
//Add the following line to make it work over https
control.c.qc.t13n.c[3].c.d.keyup[0].ia.F.p = 'https://www.google.com';
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<textarea id="transliterateTextarea" style="width:600px;height:200px">यहाँ टाइप करे ...</textarea>
<p>(Press Ctrl+g to toggle between English and Hindi)</p>
</body>
</html>Above code will works on all devices and browser except Chrome mobile browser. The Chrome Mobile Browser does not support keyboard events for now, due to a bug it always returns as a zero keycode.
We tried to find some alternative way to solve the problem, here are the JavaScript code
Code:
var hindiInputBox = document.getElementById("transliterateTextarea");
hindiInputBox.onkeyup = function (e) {
var key = e.keyCode || e.which;
// for android chrome keycode fix
if (key == 0 || key == 229) {
var AllText = this.value;
var KeyCode = AllText.charCodeAt(AllText.length - 1);
}
if (KeyCode == '32') {
hindiInputBox.value = hindiInputBox.value.trim();
hindiInputBox.dispatchEvent(new KeyboardEvent('keypress', {
'key': ' '
}));
hindiInputBox.value += ' ';
}
}
Code: Bug Fix
var hindiInputBox = document.getElementById("message");
hindiInputBox.onkeyup = function (e) {
var key = e.keyCode || e.which;
// for android chrome keycode fix
if (key == 0 || key == 229) {
var AllText = this.value;
var curCharPos = e.target.selectionStart;
var KeyCode = AllText.charCodeAt(curCharPos - 1);
}
if (KeyCode == '32') {
hindiInputBox.selectionEnd = curCharPos - 1;
hindiInputBox.dispatchEvent(new KeyboardEvent('keypress', {
'key': ' '
}));
hindiInputBox.selectionEnd = curCharPos;
}
}
Extract the Key code by the last character of the input text, if it was a "Space" then remove the last "space" by trim and then trigger KeyPress event through javascript.
Direct Query: Google Translate Language Codes List
<html>
<body>
<div>
<textarea id='inputBox'></textarea>
</div>
<button type="button" onclick="engtohin()">Translate</button>
<script>
// Language Code
// -----------------
// ENGLISH: 'en',
// AMHARIC: 'am',
// ARABIC: 'ar',
// BENGALI: 'bn',
// CHINESE: 'zh',
// GREEK: 'el',
// GUJARATI: 'gu',
// HINDI: 'hi',
// KANNADA: 'kn',
// MALAYALAM: 'ml',
// MARATHI: 'mr',
// NEPALI: 'ne',
// ORIYA: 'or',
// PERSIAN: 'fa',
// PUNJABI: 'pa',
// RUSSIAN: 'ru',
// SANSKRIT: 'sa',
// SINHALESE: 'si',
// SERBIAN: 'sr',
// TAMIL: 'ta',
// TELUGU: 'te',
// TIGRINYA: 'ti',
// URDU: 'ur'
function engtohin(){
var elem = document.getElementById('inputBox');
var TranslateText = transliteration(elem.value, 'en', 'ur');
}
function transliteration(textStr, sourceLang, destinationLang) {
var xhttp = new XMLHttpRequest();
var sourceLanguage = sourceLang || 'en';
var destinationLanguage = destinationLang || 'hn';
var url = "https://www.google.com/inputtools/request?text="+textStr+"&ime=transliteration_"+sourceLanguage+"_"+destinationLanguage+"&ie=utf-8&oe=utf-8&app=jsapi";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText)
var transText = JSON.parse(this.responseText)[1][0][1];
// on translate done
document.getElementById('inputBox').value = transText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
</html>
source:
No comments: