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

Groups > comp.lang.javascript > #14004 > unrolled thread

CSS menu, onClick takes focus from highlighted text

Back to article view | Back to comp.lang.javascript

Contents

  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

#14004 — CSS menu, onClick takes focus from highlighted text

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?

[toc] | [next] | [standalone]

#14013

On Wednesday, May 16, 2012 1:09:35 AM UTC-4, Jason C wrote:
> 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
> 
> 
>   Choose
> </div>
> 
> 
> 
>   
> 
>     Option 1
>   </div>
> 
>   
> 
>     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?

I don't know if this is the best solution, or even a good one, but I did find a potential solution.

Changing this:

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

to this:

<button onClick="toggle(event, 'menu')">
  Choose
</button>

retains the highlight in the separate field. I used CSS to make the button identical to the original DIV.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web