Return Focus to Input Text Box

[tawboiid]

I hope this hasn't been discussed before. I searched but couldn't find a thread for this.

I have an input (type="text") with some default text telling the user to enter something in the box. The input tag includes an onmousedown event which runs javascript function to clear the default text so the user can start entering their own text.

This setup behaves in two possible ways, one is good and one is bad:

Good: If the user clicks inside the text box, but after the default text, the text gets cleared and the cursor shows up at the beginning of the text box.

Bad: If the user clicks inside the text box, but directly on the default text, the text gets cleared, but the cursor is not displayed and the text box does not have the focus. In order to start typing, the user must click on the text box again.

So my question is: If the cursor is inside a string of text which gets cleared, is there a way to reinstate the cursor and the text box focus?

Here is simplified version of code involved:

<script type="text/javascript">
    function startcomment(commentid){
	document.getElementById(commentid).value = "";
    }
</script>

<input id="cid" type="text" value="Start a conversation about this" onmousedown="startcomment('cid')"></input>

[tawboiid]

Oh, just in case you are going to reply to use:

document.getElementById(commentid).focus();

It doesn't work. Once the cursor is lost, setting the focus in this way does not reinstate the cursor.

[Matthew N.]

If it is unfocused the onblur event is initiated, could you run code on that event, checking to make sure they are not trying to go to another text box

[tawboiid]

The problem is that I don't think the text box really loses focus. It just doesn't know where the cursor belongs. I have a onblur script and it doesn't activate in this situation. It only activates if you actually click somewhere else on the page.

It just seems to be that the text box doesn't know what to do with the cursor, so it doesn't do anything.

[Taywin]

Hmm... I can't recreate the event you are talking about... I always get the focus with document.getElementById(commentid).focus(). Not sure... But could you delete the closing tag of "input"? There is no closing tag for "input" by the way (and never was).

PS: What browser are you using?

[tawboiid]

Thanks for the reply. I am using Firefox 5. As a test, I loaded the test snippet into IE 8 and it worked fine from there (cursor was not lost).

So, this must be some kind of Mozilla glitch.

[Taywin]

I think so. I am using FF3 here on Linux box. FF7 on Windows box doesn't have a problem either...

[tawboiid]

Hmmm...strange. I just upgraded to FF7 and for me, it still loses the cursor.

Just to reiterate, it only loses the cursor when you click on the text in the text box that gets cleared. If you click after the text, the cursor is retained.

Running FF7 on Windows XP box and a Windows Vista box.

[Taywin]

Hmm... Yes, seem to be what you are saying in Vista. Anyway, how about doing this...

<input id="cid" type="text" value="Start a conversation about this" onmousedown="startcomment('cid')" onmouseup="javascript:this.focus()">

Or may even try...

<input id="cid" type="text" value="Start a conversation about this" onmousedown="startcomment('cid');this.focus()">

Not sure about latter because I didn't test. The mouseup event may be the cause that the element loses its focus.

[tawboiid]

Holy Smokes!

I found a solution. If I use the onclick event instead of onmousedown, it works perfectly. I don't know why there is a difference, or why the difference only affected my firefox.

I can't remember why I was using onmousedown in the first place, but there was a reason at one time. I'll have to go back and try onclick in the actual application and see if there are any other issues.

Thanks for the help along the way.