Hi,
Google provides a good script to do this,
try this :
add these script in your HEAD section
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
function eng() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
transliterationEnabled: true
};
var control =
new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(['textHindi']);
}
function hindi() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.HINDI,
destinationLanguage: [google.elements.transliteration.LanguageCode.ENGLISH],
transliterationEnabled: true
};
var control =
new google.elements.transliteration.TransliterationControl(options);
control.makeTransliteratable(['textHindi']);
}
$(document).ready(function () {
$('#textHindi').focus(function () {
eng();
});
$('#textEng').focus(function () {
hindi();
});
});
google.setOnLoadCallback(eng);
google.setOnLoadCallback(hindi);
</script>
and add two textboxes like:
<table>
<tr>
<td align="left">
<input type="text" id="textHindi" />
</td>
<td>
<input type="text" id="textEng" />
</td>
</tr>
</table>
now test your code by writing some text in both textboxes,
hope this help you.