javascript - Problem getting selected text when using a sprited button and selection.createRange() in Internet Explorer -

I am working on implementing the sprited button in Stackworflow's beloved WMD Markdown Editor and I have run into a strange bug . On all versions of IE, the selected text is lost on the button click, say, highlighting a block of text and clicking on the code button, the cursor like you was placed at the end of the selection and clicked on the button.

For example, highlight this:

  this code is  

and you click on the code button:

  this code is ` 

What's really strange is that I left the original non-sprited button bar in and it works fine. Use the same doClick (button) function in the ALL button and keyboard shortcut code!

• Old-style non-sprited buttons: OK
• Keyboards hidden in non-IE browsers: OK
• Hidden in IE Button: WTF

I can not do anything only when the button gets spited button selection.createRange () doClick () but before any pleasure. Keyboard shortcuts start working because the Focus input is never lost from texture. Can someone think of a hack that would collect some of the selected text in IE?

Onclick handler looks like this:

  button.onmouseout = function () {This.style.backgroundPosition = this.XShift + "" + General YShift; }; button. Click on = function () {if (this.onmouseout) {this.onmouseout (); } DoClick (this); }  

I have tried calling onmouseout after the doClick , but in that case there is no loss of focus, But it is not the problem.

Edit:

The same thing that looks different is in the original button code, you are clicking on an image. In the spitched code, you can see a list item with the background image set & lt; Li & gt; Clicking on . Maybe it's trying to pick non-existing text in my list?

/ edit

The actual code in my wmd repository button-cleanup branch.

If you come back to the 0d6d1b32bb42a6bd1d4ac4e409a19fdfe8f1ffcc commitment, then you can see both the button bars. One has jumped on top and shows strange behavior. Below is a residual of the original button bar and works fine. Suspicious code is in the setInputArea section in the TextareaState function in start-up () function.

One last thing I should say is that, for the time being, I want to keep control in pure JavaScript so I try to avoid this by fixing this with an external library like jQuery if it is possible I am doing.

Thank you for your help!

I know what my answer to my question is.

The spreadsheet is an HTML list and CSS, where the background image of all the list item has been moved around the background image to show different buttons and states (such as Mouseover Highlights) around the use of CSS. Standard CSS button spriting stuff

This works fine in IE with one exception:. IE tries to select empty list text when you click on the background image "button". Selection is removed in the input textetra and the current selection (which will be given by the document. Selection.Creterense ()) is transferred to the empty text of the list.

It's easy to decide - I've created a variable to select and cache a flag. In IE I set the cache and set the flag in a Mosuarordo event handler. In text processing, I check the presence of the flag - if it is set, then I use the cached category instead of selecting the document. Selection. Cutterange ().

Here are some code snippets:

  wmd.ieCachedRange = null; Wmd.ieRetardedClick = false; If (global.isIE) {button.onmousedown = function () {wmd.ieRetardedClick = true; Wmd.ieCachedRange = document.selection.createRange (); }; } Var range; If (wmd.ieRetardedClick & amp; wmd.ieCachedRange) {Range = wmd.ieCachedRange; Wmd.ieRetardedClick = false; } Else {range = doc.selection.createRange (); }  

The solution has some lines of code and rotates with Dome and possibly makes layout engine issues.

Thank you for your help, Christophe came along with the answer while thinking about your answer and while singing.