Show exact same selection range in two text fields

I have two text fields on top of one another. The one on top the user types into. The one behind it auto-completes out words with a light gray font. It works great, until you're up against the edge of the text field on top. How can I scroll the bottom text field along w开发者_开发知识库ith the top to keep their text perfectly overlaid?

Thanks in advance.

So, the problem is that the user types until it fills all the space in the textbox, keeps typing, top textbox scrolls, but text on the bottom textbox doesn't? If that's the case, i didn't try it, but I think it could be solved by handling cursor position in the bottom textbox. That can be done by using the function setSelectionRange. To set it to the end:

ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length);.

Other way to move the cursor to the end of the textbox is by, first, setting focus on the control and, second, assigning it's value.