Determine the 'Overtype' mode using Javascript

Question

We are creating a web app to replace an old-school green-screen application. In the green-screen app, as the user presses the Insert key to switch between overtype and insert modes, the cursor changes to indicate which input mode the user is currently in. In IE (which is the official browser of the company), overtype mode also works, but there's no visual indication as to whether overtype mode is on or not, until the user starts typing and possibly over-writes existing information unexpectedly. I'd like to put some sort of visual indicator on the screen if in overtype mode.

How can you determine if the browser is in 'overtype mode' from Javascript?

Is there some property or function i can query to determine if the browser is in overtype mode? Even an IE-specific solution would be helpful, since our corporate policy dictates the browser to use as IE7 (pure torture, btw).

(I do know that one solution is to do check for key presses of the Insert key. However, it's a solution that I'd prefer to avoid since that method seems a bit flaky & error-prone because I can't guarantee what mode the user would be in BEFORE he/she hits my page. )

The reasoning behind this question:

The functionality of this portion of the green-screen app is such that the user can select from a list of 'preformatted bodies of text'.

crude eg.

 
 The excess for this policy is: $xxxxxx       and max limit is:$xxxxxx
 Date of policy is:             xx/xx/xxxx    and expires     : xx/xx/xxxx
 Some other irrelevant text

After selecting this 'preformatted text', the user would then use overtype to replace the x's with actual values, without disturbing the alignment of the rest of the text.

(To be clear, they can still edit any part of the 'preformatted text' if they so wished. It's just that usually, they just wish to replace specific portions of the text. Keeping the alignment is important since these sections of text can end up on printed documents.)

Of course, the same effect can be achieved by just selecting the x's to replace first, but it would be helpful (with respect to easing the transition to the web app) to allow old methods of doing things to continue to work, while still allowing 'web methods' to be used by the more tech-savvy users.

Essentially, we're trying to make the initial transition from the green-screen app to the web app be as seemless as possible to minimise the resistance from the long-time green-screeners.

Do you want to know whether the insert key is pressed or not? — rahul, Jul 16 '09 at 12:29
We are creating a web app to replace an old-school green-screen application. In the green-screen app, as the user presses the Insert key to switch between overtype and insert modes, the cursor changes to indicate which input mode the user is currently in. In IE (which is the official browser of the company), overtype mode also works, but there's no visual indication as to whether overtype mode is on or not, until the user starts typing and possibly over-writes existing information unexpectedly. I'd like to put some sort of visual indicator on the screen if in overtype mode. — snorkpete, Jul 16 '09 at 12:31
Enter this comment as an edit to your question so that it becomes more readable. — rahul, Jul 16 '09 at 12:31
In my opinion, it's the application's (i.e. the browser's) responsibility to show the insert mode. After all, you don't have real control over that in the web page, since it's the browser offering the editing control and typing. — OregonGhost, Jul 16 '09 at 13:24
@OregonGhost: I agree wholeheartedly that the browser should show the insert mode. Unfortunately IE doesn't seem to think so. I was trying to find a workaround to display an indicator that IE should display itself. — snorkpete, Jul 16 '09 at 13:37
If it's a company policy, what about an Internet Explorer plugin? — OregonGhost, Jul 16 '09 at 14:57

score 1 · Answer 1 · edited Aug 09 '16 at 10:32

In IE you can use document.queryCommandValue("OverWrite").

For IE only:

function isOverwriteEnabled() {
    try {
        // try the MSIE way
        return document.queryCommandValue("OverWrite");
    } catch (ex) {
        // not MSIE => not supported
        return false;
    }
}

Firefox, Chrome, and Safari:

Because Mac does not have nor support the "insert" key, Safari will never ever support "insert" mode.

For Chrome and Firefox, "insert" mode is not encouraged for support as Mac does not have it. (Also, see "Furthermore")

That also means, since Windows supports "insert" mode, that IE will more than likely always support it.

Furthermore:

Firefox has a bug report classified as "WontFix" for years, so the "Insert" key will probably never be supported.

I added edits and upvoted as [another stack question](http://stackoverflow.com/questions/18242548/check-if-insert-mode-is-on-when-typing-in-an-input) was marked as duplicate for this one, so I thought the answer deserved "merging." — , Aug 09 '16 at 09:44

score 0 · Answer 2 · answered Jul 16 '09 at 12:34

0

The problem is that if the user presses the insert key after entering your page then you can track down it easily.

But when the user has already pressed the insert key before entering your page then it seems to be a difficult task.

answered Jul 16 '09 at 12:34

rahul

184,426
49
232
263

score 0 · Answer 3 · answered Jul 16 '09 at 12:50

I suggest careful consideration of the 'overtype' feature. Does this behavior make sense in the web context, at all?

What utility does the 'overtype' feature provides in the old ANSI presentation which is unavailable through the web?

Unless I'm fully misunderstanding your question (apologies if so), I feel like the development intent may not align well with user expectations and typical web conventions.

If the goal is to produce a page where:

by default 'insert' mode is disabled
user can trigger 'insert mode' for editing purposes

...then why not use dynamic form inputs?

When a user clicks on a particular segment of HTML, a JavaScript is used to present the content as an element whose default value matches the chosen HTML tag.

Once editing is completed the input is parsed, the page updated, and form input removed from display.

Would this method suit your needs?

@nathan: unfortunately, you are misunderstanding my intention. I have ammended the question with a further clarification of what i'm trying to achieve. — snorkpete, Jul 16 '09 at 13:35

Determine the 'Overtype' mode using Javascript

3 Answers3

For IE only:

Firefox, Chrome, and Safari:

Furthermore:

Linked