Смещение текста в текстовом поле после изменения
 

Добрый день
Есть проблемы с текстовым полем. Есть текстовое поле

<input id="mytext" name="mytext" type="text" value="" style="width: 150px;">

Поле имеет ширину 150 пикселей и если вводить текст с клавиатуры - все нормально, после достижения текстом конца выделенной ширины текст смещается, курсор стоит в конце и видно что вводишь. А вот если мне нужно что-то динамически добавить в поле

document.getElementById('mytext').value += 'abcd';

то положение текста в поле как бы сбивается. Как будто курсор передвинули в самое начало. То, что вводилось последним не видно (потому что текст длинный и в 150 пикселей не помещается). Приходится двигать курсор в самый конец вручную.
Я подумал, что после динамического добавления содержимого в поле перемещать курсор в конец с помощью javascript. Я нашел код для перемещения курсора, но он себя ведет не так как надо мне.

function setCaretPosition(el, pos)
{
    if (el.createTextRange)
    {
        // IE
        var range = el.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
        el.focus();
    }
    else if (el.selectionEnd)
    {
        // Gecko
        el.selectionEnd = pos;
        el.selectionStart = pos;
        el.focus();
    }
}
setCaretPosition(
document.getElementById('mytext'),
document.getElementById('mytext').length
);

В IE8, хроме он работает верно, курсор передвигается в конец вместе с текстом и его видно. А вот в Firefox курсор стает в нужное положение, но сам текст не смещается к курсору и курсор не видно. Только после того как начать вводить с клавиатуры текст смещается к положению каретки. В опере вообще пока вручную курсор не установить в поле ввода, курсор вообще никуда не передвинется.
Мне как-то нужно сделать, чтобы в поле ввода текст не смещался к началу после динамического добавления содержимого в него. А как сделать это я не пойму. Может кто-то подскажет?