[Авас]

Столкнулся с двумя багами )
1. Если в textarea уже есть текст и нужно дописать что-то в середине, то скрипт заменяет введённую букву и переводит курсор в конец строки.
2. Если хочешь вставить запятую, то он меняет её на "б"; причём, если указать, чтобы он менял "?" на ",", то скрипт всё равно заменит его на "б", т.к. он сначала заменит "?" на ",", а потом "," на "б".

Нашёл решение, где их избежали (правда там только рус -> en, но не суть важно). Но опять столкнулся с проблемой: как переделать из getElementById в getElementsByClassName.
Пробовал сделать по аналогии с тем примером, но не вышло. А как нужно?

Было:

function correctLayoutInTag(text,cursor)
{
    text = document.getElementById('abcd');
    cursor = getCaret(document.getElementById('abcd'));
    translit = function(text) { return correctLayout(text)}
    text.value = text.value.replace(text.value, translit);
    setCaretToPos(text, cursor);
}

<textarea style="width:400px; height:150px;" id="abcd" onkeyup="correctLayoutInTag()">текст</textarea>

Мои танцы с бубном:

function correctLayoutInTag(text,cursor) {

    var text = document.getElementsByClassName('en');
	 for (var i = 0; i < text.length; i++) {
	  var texten = text[i];
	};
	
    var cursor = getCaret(document.getElementsByClassName('en'));
	 for (var i = 0; i < cursor.length; i++) {
	  var cursoren = cursor[i];
	};
	 
    var translit = function(texten) {return correctLayout(texten)}
    texten.value = texten.value.replace(texten.value, translit);
    setCaretToPos(texten, cursoren);

};

<textarea style="width:400px; height:150px;" class="en" onkeyup="correctLayoutInTag()">текст</textarea>
<textarea style="width:400px; height:150px;" class="en" onkeyup="correctLayoutInTag()">текст</textarea>