Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14004

CSS menu, onClick takes focus from highlighted text

Show all headers | View raw

I'm changing a regular <select> menu to a CSS menu, like so:

// toggle() changes the display value for menu
function toggle(e, id) {
  var el = document.getElementById(id);
  el.style.display = (el.style.display == 'none') ? 'block' : 'none';

  toggle.el = el;
  if (e.stopPropagation) e.stopPropagation();
  e.cancelBubble = true;
  return false;
}

// CSS Menu
<div onClick="toggle(event, 'menu')">
  Choose
</div>

<div id="menu" style="display: none; position: absolute">
  <div onMouseDown="doSomething('a')">
    Option 1
  </div>

  <div onMouseDown="doSomething('b')">
    Option 2
  </div>
</div>

When the user selects an option, doSomething(x) works with highlighted text inside of a separate contenteditable field.

The problem I'm having is that when they click on "Choose", the contenteditable field loses focus, so I lose the highlighted text.

If I change the "toggle" command from onClick() to onMouseOver(), everything works as expected, so I'm 99% sure that the problem is that the onClick is making me lose focus. If I change it to onMouseDown, though, then I think toggle() is called on both MouseDown and MouseUp; when I click down, the menu toggles on, but then when I let off, it toggles back off. I don't think this would solve the problem of losing the highlighted text anyway, though; I'm pretty sure that I would still lose it as soon as I let off of the click.

Can you guys suggest a way that I can click to toggle this menu, without losing the highlighted text in the contenteditable field?

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

CSS menu, onClick takes focus from highlighted text Jason C <jwcarlton@gmail.com> - 2012-05-15 22:09 -0700
  Re: CSS menu, onClick takes focus from highlighted text Jason C <jwcarlton@gmail.com> - 2012-05-16 00:24 -0700

csiph-web