getElemenentByID(...) is null or not an object foutmeling in bepaalde browsers

Ik ben bezig om voor iemand een website te maken, voor het plaatsen van wat simpele tekstopmaak bij foto's. Hiervoor maak ik onder andere gebruik van een textarea, waarbij door middel van Java de cursor positie wordt bijgehouden. (Ik geef meteen toe, dat ik het script gekopieerd heb van internet, omdat mijn eigen kennis van Java nul komma nul is)

Dit script werkt perfect in Internet Explorer 9 en ik ging dan ook met een goed gevoel naar degene voor wie ik dit in elkaar heb gezet.
Helaas kwam er al snel antwoord terug dat het niet werkte.

Ik nogmaals testen en geen problemen gevonden, maar zowel thuis als op werk maak ik gebruik van IE9 en dus maar eens IE8 en 7 geprobeerd, en ja hoor, daarin werkt het inderdaad niet.

Na gezocht te hebben op internet, heb ik gevonden dat oudere IE browsers niet correct omgaan met getElementByID en daarbij staan ook oplossingen die dit zouden moeten kunnen verhelpen.
Helaas voor mij krijg ik die oplossingen niet aan de gang, simpelweg omdat het me aan kennis ontbreekt.

Mijn vraag is dan ook, hoe kan ik de code zo aanpassen, dat het ook in andere browsers dan IE9 gaat werken?

Het gaat om het volgende script:

<script language="JavaScript" type="text/javascript">
<!--

function initPosition(textBox) {
var storedValue = textBox.value;
textBox.value = "";
textBox.select();

var caretPos = document.selection.createRange();
textBox.__boundingTop = caretPos.boundingTop;
textBox.__boundingLeft = caretPos.boundingLeft;

textBox.value = " ";
textBox.select();

caretPos = document.selection.createRange();
textBox.__boundingWidth = caretPos.boundingWidth;
textBox.__boundingHeight = caretPos.boundingHeight;

textBox.value = storedValue;
}

function storePosition(textBox) {
var caretPos = document.selection.createRange();

var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;
var boundingLeft = (caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;

textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;
textBox.__Column = (boundingLeft / textBox.__boundingWidth) + 1;
}

function updatePosition(textBox) {
storePosition(textBox);
document.forms[0].txtLine.value = textBox.__Line;
document.forms[0].txtColumn.value = textBox.__Column;
}

function onFocus(obj) {
var end = obj.value.length;
if(obj.setSelectionRange)
obj.setSelectionRange(end, end);
}

document.getElementById("txtLine").value = textBox.__Line;
document.getElementById("txtColumn").value = textBox.__Column;
//-->
</script>

[size=xsmall]Toevoeging op 16/04/2012 19:39:54:[/size]

Ik heb een tweetal oplossingen gevonden, maar deze kunnen niet zondermeer gekopieerd worden en dan werken met het zojuist geplaatste script. Voor de volledigheid, plaats ik beide oplossingen hier nog even.

if (/msie/i.test (navigator.userAgent)) //only override IE
{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id)
{
var elem = document.nativeGetElementById(id);
if(elem)
{
//make sure that it is a valid match on id
if(elem.attributes['id'].value == id)
{
return elem;
}
else
{
//otherwise find the correct element
for(var i=1;i<document.all[id].length;i++)
{
if(document.all[id][i].attributes['id'].value == id)
{
return document.all[id][i];
}
}
}
}
return null;
}
}

//use browser sniffing to determine if IE or Opera (ugly, but required)
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}

//fix both IE and Opera (adjust when they implement this method properly)
if(isOpera || isIE){
document.nativeGetElementById = document.getElementById;
//redefine it!
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem){
//verify it is a valid match!
if(elem.attributes['id'] && elem.attributes['id'].value == id){
//valid match!
return elem;
} else {
//not a valid match!
//the non-standard, document.all array has keys for all name'd, and id'd elements
//start at one, because we know the first match, is wrong!
for(var i=1;i<document.all[id].length;i++){
if(document.all[id][i].attributes['id'] && document.all[id][i].attributes['id'].value == id){
return document.all[id][i];
}
}
}
}
return null;
};
}