Hello,
I'm trying to figure out how to get an input form field to be pre-populated with text on page load as well as having the cursor location in the same input field on page load, and I need to have the pre-populated text disappear when the user actually manually clicks in the input field. It seems I can only have one or the other, but I have seen it done with both the pre-populated text in the form field along with the cursor location in the same input field, where the pre-populated text disappears when the user clicks in the input field. If you need to see the code I'm working with or if there are any questions please let me know.

Thank you!

Richard

12-05-2012, 05:21 AM

007Julien

Try something like this which allow not to use the mouse (but tab) for accessibility

Thanks, 007Julien. Your suggestion has one aspect of the issue I need help with (the form field pre-populating with the field value, as your example has), but what I am needing is the form field pre-populated with text (such as First Name) but with the cursor in the same field, on page load.

So what the user sees is a form field with the field pre-populated with text (such as First Name, Zip Code, etc) and the cursor placed by default on page load in that same form field where the pre-populated text appears. The text would then disappear when the user manually clicks in the form field.

Thank you in advance!

Richard

12-05-2012, 04:08 PM

007Julien

Then try to replace onfocus by onclick, and give the focus to the first field with a document.getElementById('myFirstFieldId').focus(); on the page load.

There are users who can not use a mouse...

12-05-2012, 04:23 PM

richardsmoker

Thanks again, 007, but....

Here's how I wrote the code per your suggestions but I think I am not following your suggestions correctly. Can you advise? Sorry to be a pain. Cheers!

Place the script at the end of the body (the document do not exist when you call it) or write

Code:

window.onload=function(){document.getElementById('pre').focus();}

to execute this function after loading.

12-05-2012, 04:37 PM

richardsmoker

Well that's a hell of a trick! Thank you, 007! Works like a charm!

12-05-2012, 05:28 PM

richardsmoker

One last question, 007: is there a way to make it so that the text disappears if you use your mouse to click in the field where the cursor already is? At this point, on page load, the pre-populated text is either highlighted or the cursor is in front of the pre-populated text (depending on the browser), but when certain users inevitably click in there with their mouse, the pre-populated text doesn't disappear. You then must manually highlight it and delete it. Any suggestions?

Thank you

12-05-2012, 05:57 PM

007Julien

With an onclick="fcs()", instead of an onfocus="fcs()", for the tree fields the defaultValue disappears...

Since, for selection see document.selection.createRange() (for IE) and setSelectionRange() for the others browsers...