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

Groups > comp.lang.javascript > #14013

Re: CSS menu, onClick takes focus from highlighted text

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous 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