Adjusting In-text Carat Properties And Preventing Arrow Key Scrolling

For those without the time or patience to read the full post i have summarised a list of my issues, for the full description of the reasons behind them please read on.

Disabling the text cursor in a specific text field (not the mouse cursor but the one which is controlled by the keyboard inside the field)

Adjust the blink rate or the colour of a carat.

Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.

I am currently constructing a page which displays a gallery of images and I have been trying to correct one final issue for some time now.

I have used a pair of buttons to navigate through the table cells in which the images are stored by using a getElementByTagName function and having the buttons adjust the index of the desired image. This works fine.

My issue arises from the fact that I also assigned the arrow keys using onkeydown and the relevant keycodes to call the same function so that the user can navigate the table via those keys. It all worked perfectly until I tested the page while it was zoomed in far enough that the browser scrollbars kicked in and with each arrow key press the page would scroll while also changing the selected image.

This in itself kind of highlighted the fact that I shouldn't really be hijacking default browser functions, so the logical solution was to a) provide the user with the option to enable arrow key navigation and b) prevent the document from scrolling about while this option is enabled.

So for:

a) I created a button which when pressed activates the onkeydown functions for the arrow keys and then changes into a button which will deactivate them again onclick.

b) was a hell of a lot more difficult to fix but in the end I found what I will call a "back door" method where I insert a read only text field, set it to match the background (which is conveniently black) so it is invisible, and force the document focus into the text field while the button is active. This disables the scrolling completely while the navigation is turned on and works perfectly... in firefox.

Someone extremely clever at Microsoft decided to code IE to make the text entry cursor contrast with whichever background is selected for the field, as a result I'm stuck with a blinking white carat next to my buttons which may be one of the most irritating things I have ever seen on a black background.

So again, I would be extremely happy if someone could suggest a solution to any of the following:

Disabling the text cursor in a specific text field (searched far and wide about this and the only answer anyone gets seems to be 'why bother using a text box at all' or 'removing my carat would make me extremely angry as a user' but usually because they dont specify why they want to hide it).

At least adjust the blink rate or the colour of the carat to make it less annoying or invisible (seen one example about the blink rate in JS but it seemed angled towards game coding and I couldnt get it to work on my page - tips appreciated).

An alternative or all-round better way to approach the navigation function issue as I'm not too pleased about having an invisible, barely functioning text field in the middle of my page - I've seen a few posts about setting up a div which acts as its own window but I haven't yet seen it working.

Anyone who has some in-depth knowledge about browser based games who would like to tell me about how they stop arrow keys from scrolling around the page.

One thing that I am fixed on keeping is that it is the arrow keys which navigate the table, I know an instant solution would be to use ASDW but I've been bashing away at this for so long that it's getting personal now.