В общем, вот рабочая версия:
<html><head><title>Transliteration</title><meta charset="cp1251" />
<script type="text/javascript">
//Получение позиции каретки в textarea
function getCaret(el)
{ if (el.selectionStart) {return el.selectionStart;}
else if (document.selection)
{ el.focus();
var r = document.selection.createRange();
if (r == null) {return 0;}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
}
//Задание позиции каретки в textarea
function setSelectionRange(input, selectionStart, selectionEnd)
{
if (input.setSelectionRange)
{ input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange)
{ var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function setCaretToPos(input, pos) {setSelectionRange(input, pos, pos);}
//Транслитерация с русского на английский
function correctLayoutRusToEn(text){
if (typeof(text)=="undefined") return null;
var transl=new Array();
transl['А']='F'; transl['а']='f'; transl['Б']='<'; transl['б']='\,'; transl['В']='D'; transl['в']='d';
transl['Г']='U'; transl['г']='u'; transl['Д']='L'; transl['д']='l'; transl['Е']='T'; transl['е']='t';
transl['Ё']='~'; transl['ё']='~'; transl['Ж']=';'; transl['ж']=';'; transl['З']='P'; transl['з']='p';
transl['И']='B'; transl['и']='b'; transl['Й']='Q'; transl['й']='q'; transl['К']='R'; transl['к']='r';
transl['Л']='K'; transl['л']='k'; transl['М']='V'; transl['м']='v'; transl['Н']='Y'; transl['н']='y';
transl['О']='J'; transl['о']='j'; transl['П']='G'; transl['п']='g'; transl['Р']='H'; transl['р']='h';
transl['С']='C'; transl['с']='c'; transl['Т']='N'; transl['т']='n'; transl['У']='E'; transl['у']='e';
transl['Ф']='A'; transl['ф']='a'; transl['Х']='{'; transl['х']='['; transl['Ц']='W'; transl['ц']='w';
transl['Ч']='X'; transl['ч']='x'; transl['Ш']='I'; transl['ш']='i'; transl['Щ']='O'; transl['щ']='o';
transl['Ъ']='}'; transl['ъ']=']'; transl['Ы']='S'; transl['ы']='s'; transl['Ь']='M'; transl['ь']='m';
transl['Э']='\"'; transl['э']='\''; transl['Ю']='>'; transl['ю']='\.'; transl['Я']='Z'; transl['я']='z';
transl[':']='^'; transl['/']='|'; transl['?']='&';
var result='';
for(i=0; i<text.length; i++)
{ if(transl[text.charAt(i)]!=undefined) {result+=transl[text.charAt(i)]}
else {result+=text.charAt(i)}}
return result;
};
//Транслитерация с английского на русский
function correctLayoutEnToRus(text){
if (typeof(text)=="undefined") return null;
var transl=new Array();
transl['F']='А'; transl['f']='а'; transl['<']='Б'; transl['\,']='б'; transl['D']='В'; transl['d']='в';
transl['U']='Г'; transl['u']='г'; transl['L']='Д'; transl['l']='д'; transl['T']='Е'; transl['t']='е';
transl['~']='Ё'; transl['~']='ё'; transl[';']='Ж'; transl[';']='ж'; transl['P']='З'; transl['p']='з';
transl['B']='И'; transl['b']='и'; transl['Q']='Й'; transl['q']='й'; transl['R']='К'; transl['r']='к';
transl['K']='Л'; transl['k']='л'; transl['V']='М'; transl['v']='м'; transl['Y']='Н'; transl['y']='н';
transl['J']='О'; transl['j']='о'; transl['G']='П'; transl['g']='п'; transl['H']='Р'; transl['h']='р';
transl['C']='С'; transl['c']='с'; transl['N']='Т'; transl['n']='т'; transl['E']='У'; transl['e']='у';
transl['A']='Ф'; transl['a']='ф'; transl['{']='Х'; transl['[']='х'; transl['W']='Ц'; transl['w']='ц';
transl['X']='Ч'; transl['x']='ч'; transl['I']='Ш'; transl['i']='ш'; transl['O']='Щ'; transl['o']='щ';
transl['}']='Ъ'; transl[']']='ъ'; transl['S']='Ы'; transl['s']='ы'; transl['M']='Ь'; transl['m']='ь';
transl['\"']='Э'; transl['\'']='э'; transl['>']='Ю'; transl['\.']='ю'; transl['Z']='Я'; transl['z']='я';
transl['^']=':'; transl['/']='|'; transl['&']='?';
var result='';
for(i=0; i<text.length; i++)
{ if(transl[text.charAt(i)]!=undefined) {result+=transl[text.charAt(i)]}
else {result+=text.charAt(i)}}
return result;
};
window.onload = function() {
var elements = document.getElementsByClassName("en");
for (var i = 0; i < elements.length; i++) {
elements[i].onkeyup = function correctLayoutInTag(text,cursor)
{
text = this;
cursor = getCaret(text);
translit = function (text) { return correctLayoutRusToEn(text)}
text.value = text.value.replace(text.value, translit);
setCaretToPos(text, cursor);
};
};
var elements = document.getElementsByClassName("rus");
for (var i = 0; i < elements.length; i++) {
elements[i].onkeyup = function correctLayoutInTag(text,cursor)
{
text = this;
cursor = getCaret(text);
translit = function (text) { return correctLayoutEnToRus(text)}
text.value = text.value.replace(text.value, translit);
setCaretToPos(text, cursor);
};
};
};
</script>
</head>
<body style="padding-left: 100px;">
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с английского на русский" class="rus"></textarea>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с русского на английкий" class="en"></textarea><br>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с английского на русский" class="rus"></textarea>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с русского на английкий" class="en"></textarea>
</body>
</html>
P.S.: на основе скрипта транслитерации осюда:
http://www.cyberforum.ru/post3540293.html