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

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

Why do I have to click twice?

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

Contents

  Why do I have to click twice? justaguy <lichunshen84@gmail.com> - 2012-09-27 21:30 -0700
    Re: Why do I have to click twice? "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-09-28 09:24 +0300
      Re: Why do I have to click twice? justaguy <lichunshen84@gmail.com> - 2012-09-28 06:00 -0700

#16217 — Why do I have to click twice?

Hi,

code:
<div id="news" onClick="this.contentEditable='true';">
<p>
New Yahoo Inc CEO Marissa Mayer laid out broad goals for the Internet
giant in her first company wide address Tuesday, and received an
enthusiastic reception from a workforce that has faced years of
uncertainty and management turmoil.
</p>
</div>

behavior:
I have to click on the div twice to get it into editing mode, why a
single click won't do it?  Or the code needs improvement?

Thanks.

[toc] | [next] | [standalone]

#16219

2012-09-28 7:30, justaguy wrote:

> <div id="news" onClick="this.contentEditable='true';">
[...]
> I have to click on the div twice to get it into editing mode, why a
> single click won't do it?  Or the code needs improvement?

The behavior depends on browser. On Chrome and Safari, the cursor 
appears inside the element, in the clicked location, and you can type 
there right away. On Firefox, the cursor does not appear and the element 
takes no normal keyboard input, but Ctrl V pastes the clipboard content 
in the clicked position. On IE and Opera, even Ctrl V does not work 
before you click again. (All tested on Win 7.)

On the browsers tested, the element does not appear as focused in the 
sense of matching the :focus selector in CSS before it is clicked on 
another time.

Confusing, isn't it? It is somewhat obscure what *should* happen. 
Anyway, the behavior becomes more consistent if you append the invocation

this.focus()

at the end of the onclick event handler. Then the element becomes 
focused, the cursor appears, and the element receives immediate keyboard 
input. One problem remains: on Opera, the cursor appears at the start of 
the element content, not in the clicked location, so you need to click 
again in order to insert text somewhere else.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#16228

On Sep 28, 2:24 am, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> 2012-09-28 7:30, justaguy wrote:
> > <div id="news" onClick="this.contentEditable='true';">
> [...]
> > I have to click on the div twice to get it into editing mode, why a
> > single click won't do it?  Or the code needs improvement?
>
> The behavior depends on browser. On Chrome and Safari, the cursor
> appears inside the element, in the clicked location, and you can type
> there right away. On Firefox, the cursor does not appear and the element
> takes no normal keyboard input, but Ctrl V pastes the clipboard content
> in the clicked position. On IE and Opera, even Ctrl V does not work
> before you click again. (All tested on Win 7.)
>
> On the browsers tested, the element does not appear as focused in the
> sense of matching the :focus selector in CSS before it is clicked on
> another time.
>
> Confusing, isn't it? It is somewhat obscure what *should* happen.
> Anyway, the behavior becomes more consistent if you append the invocation
>
> this.focus()
>
> at the end of the onclick event handler. Then the element becomes
> focused, the cursor appears, and the element receives immediate keyboard
> input. One problem remains: on Opera, the cursor appears at the start of
> the element content, not in the clicked location, so you need to click
> again in order to insert text somewhere else.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/

Beautiful.  Thank you.

[toc] | [prev] | [standalone]

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

csiph-web