Pre-populate form with cursor location on page load

This site is best viewed in a modern browser with JavaScript enabled.

Pre-populate form with cursor location on page load

richardsmoker

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

007Julien

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor,  www.pspad.com">
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
#frm {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;border:1px solid #000;}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
input {padding:3px;font:16px Georgia,Garamond,Serif;background:#ffc;border:1px solid #000;}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline;font-weight:bold;}
</style>
<script type="text/javascript">
var t_f=null;
function fcs(t){
	if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
}
function blr(t){
	if (t.value=='') {t.value=t.defaultValue;}
}
</script>
</head>
<body>
<form id="frm" method="POST" action="formulaire.html">
<h1>For new forms</h1>
<p><input id="pre" name="pre" type="text" value="Your vorname" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nom" name="nom" type="text" value="Your name" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="crl" name="crl" type="text" value="Your adress" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nrg" name="nrg" type="submit" title="Submit the form" value="Register"></p>
<p><input type="reset" title="Reset the form" value="Reset"></p>
</form>
</body>
</html>

richardsmoker

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

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...

richardsmoker

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!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Formulaire</title>
<style type="text/css">
body {margin:0px;padding:40px;font:18px Georgia,Garamond,Serif;text-align:center;background:#ffc;color:#600;}
#frm {display:block;margin:0px auto;padding:20px;border:0px;width:320px;background:#c96;border:1px solid #000;}
h1 {margin:15px;padding:0px;font-weight:bold;font-size:130%}
input {padding:3px;font:16px Georgia,Garamond,Serif;background:#ffc;border:1px solid #000;}
#page a {text-decoration:none;color:#600}
#page a:hover {text-decoration:underline;font-weight:bold;}
</style>
<script type="text/javascript">
var t_f=null;
function fcs(t){
if (t.value==t.defaultValue) {t.value='';if (document.selection && document.selection.clear) document.selection.clear()}
}
function blr(t){
if (t.value=='') {t.value=t.defaultValue;}
}
document.getElementById('pre').focus();
</script>
</head>
<body>
<form id="frm" method="POST" action="formulaire.html">
<h1>For new forms</h1>
<p><input id="pre" name="pre" type="text" value="Your vorname" onclick="fcs(this)" onblur="blr(this)"></p>
<p><input id="nom" name="nom" type="text" value="Your name" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="crl" name="crl" type="text" value="Your adress" onfocus="fcs(this)" onblur="blr(this)"></p>
<p><input id="nrg" name="nrg" type="submit" title="Submit the form" value="Register"></p>
<p><input type="reset" title="Reset the form" value="Reset"></p>
</form>
</body>
</html>

007Julien

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

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

to execute this function after loading.

richardsmoker

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

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

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...

As example, the following script select sentences

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Select sentences</title>
<style type="text/css">
</style>
<script type="text/javascript">
function slc(t){
	if (window.ActiveXObject) {
		var txtRng = document.selection.createRange();
		txtRng.moveStart('sentence',-1);
		txtRng.moveEnd('sentence',+1);
		txtRng.moveEnd('character',-1);
		txtRng.select();}
	else {// other browsers and opera
		var strSlc = t.value.substring(0,t.selectionStart);
		var endSlc = t.value.substring(t.selectionEnd);
		strSlc = strSlc.replace(/[^\.]+\.\s/g,'');
		endSlc = endSlc.replace(/\.[^\.]+/g,'')+'.';
		t.setSelectionRange(t.selectionStart-strSlc.length, t.selectionEnd+endSlc.length);}	
}
// La selection de plusieurs ccaractères ne déclanche pas de click avec Opera
// Le onselect fonctionne sur tous les navigateurs mais ne répond pas au clic
</script>
</head>
<body>
<p>Click or select words on this textarea to select sentence(s).</p>
<textarea rows="13" cols="80" onclick="slc(this)">Lorem ipsum dolor sit amet consectetuer eros eu nascetur at quam. Nam pretium Maecenas egestas interdum adipiscing interdum tempus Curabitur malesuada Integer. Curabitur interdum justo Ut fermentum Cras eu dignissim Suspendisse ipsum Nullam. Sit ac Aenean Donec vitae ornare libero orci odio tristique Donec. Semper tempus vestibulum nibh congue Nulla et malesuada nulla mollis massa. Natoque lobortis Curabitur orci et enim porttitor Vestibulum sodales laoreet magnis. Penatibus mauris. 
Accumsan mollis sollicitudin ipsum et laoreet nunc egestas nibh mauris sit. Semper dui aliquet Praesent id Morbi consectetuer accumsan et hendrerit Sed. Lacus quis Ut diam auctor nec sodales nunc commodo leo consequat. Id ac at id id odio Morbi orci tortor est rutrum. Consequat Nam pulvinar parturient eleifend urna Quisque quis metus In laoreet. Penatibus Quisque in sem cursus ac sem at Sed.
Neque ligula dolor senectus vel ornare eleifend iaculis quam ipsum dolor. Iaculis cursus lacus fames eleifend ridiculus a ut Sed at pretium. Lorem arcu dictumst Sed id volutpat id iaculis cursus vitae id. In nibh Mauris volutpat at eget ut velit vestibulum pellentesque eget. Dapibus urna convallis nisl fermentum auctor Sed pulvinar sed leo Nam. Lobortis a quis Sed enim pretium Nam Donec enim velit turpis. 
Netus sed fringilla a penatibus fringilla convallis tellus Vestibulum sed nibh. Pellentesque Phasellus Vestibulum Nunc leo sagittis tellus nulla tincidunt laoreet leo. Ac congue venenatis eget a at tellus quis orci condimentum porttitor. Magnis semper malesuada et ante consequat orci consectetuer id pede aliquet. Porttitor accumsan Lorem aliquet Vestibulum eleifend lacus eget a Sed semper. 
</textarea>
</body>
</html>

richardsmoker

Thanks again, 007.