0

I am trying to make it possible to insert text at the current caret location in a text field when clicking something on the page.

In order to make this work the focus should not leave the text field when clicking, and the caret should not be moved.

I can get this working in - for instance - chrome with event.preventDefault() in the mousedown event.

But in internet explorer I simply cannot make this work. Any suggestions welcome.

Clarification: I am trying to provide some good means for the users to input exotic characters that can not be entered directly from their keyboard.

I have implemented for instance ctrl+alt+p which works well in all browsers, except internet explorer where I cannot stop the default behaviour of pressing ALT (activating the menu bar).

I have then made a "palette" of the characters next to the field, that can be clicked with the mouse while typing. This works well in all browsers, except internet explorer where I cannot prevent the default blur-behaviour of a mouseclick.

competent_tech
  • 44,465
  • 11
  • 90
  • 113
Dennis Thrysøe
  • 1,791
  • 4
  • 19
  • 31

2 Answers2

1

Maybe this is a dead conversation but I have a solution.

For IE specifically look into the onbeforedeactivate event. You will want to attach this to the the element you want to keep focus. It's a bit tricky because if you always cancel this event you can never loose focus on this element but if you're careful how you implement it you can achieve what you want.

I've been doing this for a while now with nice clean results.

Nate
  • 11
  • 1
0

Don't do this

I suggest you don't do this, because keeping (or better said returning focus) caret in text field will also prevent users from changing browser's address bar which is something you don't want..

I suggest you rather explain your process more detailed and maybe we can suggest a better alternative.

After some clarification

What you should do is insert text/character at caret position. input and textarea preserve caret position even when they loose focus. So you should do something similar to what stackoverflow does here. When you select some text (when you type question/answer) and then click B icon on top, two stars are added around selected text. This is how you should do your special character insertions. When user clicks a perticular exotic character, that character should be added/inserted at input's caret position.

There are quite a few stackoverflow questions related to solving this exact problem - adding text at caret position:

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • Any other suggestions on how to input characters that are not available in the users keyboard? Any help much appreciated :) – Dennis Thrysøe Mar 25 '11 at 12:11
  • @Dennis Thrysøe: Check my edited answer. It should give you some directions that you should take. – Robert Koritnik Mar 25 '11 at 13:35
  • We agree. I was trying to the same thing, but having problem with keeping focus/caret in the input box on internet explorer. I will try you suggestions :) – Dennis Thrysøe Mar 27 '11 at 08:14
  • Still unable to re-focus the input on internet explorer without moving the caret to the start. But your answer was still good. – Dennis Thrysøe Mar 27 '11 at 08:46
  • @Dennis: I suggest you check Stackoverflow's functionality - whether it works reliably across different browsers and debug their code to see how it's done. – Robert Koritnik Mar 27 '11 at 11:56