/    Sign up×
Community /Pin to ProfileBookmark

forms: curser in box, highlighted?

Copy linkTweet thisAlerts:
Aug 24.2004

I just learned how to place the cursor in the first input box.
I would like to have the text in the box to be highlighted (or rather pre selected.)

here is a snippit of my code:

[QUOTE]

<body onLoad=”document.wall_calculator.length.focus()”>
<h1>Wall Calculator</h1>

<form name=”wall_calculator” method=”post” action=””>

Wall Length:
<input name=”length” value=”0″ size=”3″ OnBlur=”CalculateTotals()” /><br>

[/QUOTE]

The curser lands in the correct box, but I would like to have it highlighted for edit by the user.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ExuroAug 24.2004 — Here's what I came up with:

<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function CalculateTotals() {}

window.onload = function() {
document.wall_calculator.[color=blue]wLength[/color].focus();
if (document.all) { // Mozilla doesn't much like this command
[color=red]document.execCommand('SelectAll');[/color]
}
}
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Wall Calculator&lt;/h1&gt;
&lt;form name="wall_calculator" method="post" action=""&gt;
Wall Length:
&lt;input name="[color=blue]wLength[/color]" value="0" size="3" onBlur="CalculateTotals()" /&gt;&lt;br&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

The line in red is what does it. That command runs the "Select All" command on whatever currently has focus. Also, notice that I changed the name of your text box. This isn't really necessary, but "length" is a reserved word, so it's not a good idea to use it as the name of your text box. You should always avoid naming your textboxes things like "name", "length", "value", et cetera. Anyway, I hope that helps!
Copy linkTweet thisAlerts:
@anothenauthorAug 24.2004 — arg confused again, and it didn't work.

this is what I did:
<script language="JavaScript">

<!--

// constants:

var track=.4945

var stud=.5175

function CalculateTotals(){

f=document.wall_calculator;

f.track_count.value=f.wall_length.value*2/10; // calculate track at 10' wall_lengths
f.stud_count.value=f.wall_length.value*12/f.on_center.value+1 // calculate stud count
f.ten_foot_total_price.value=(f.track_count.value*10*track)+(f.stud_count.value*10*stud) // calculate 10' total price ten_foot_total_price
f.twelve_foot_total_price.value=(f.track_count.value*10*track)+(f.stud_count.value*12*stud) // twelve_foot_total_price
f.fourteen_foot_total_price.value=(f.track_count.value*10*track)+(f.stud_count.value*14*stud) // fourteen_foot_total_price
f.sixteen_foot_total_price.value=(f.track_count.value*10*track)+(f.stud_count.value*16*stud)
;}
window.onload = function() {
document.wall_calculator.wLength.focus();
if (document.all) { // Mozilla doesn't much like this command
document.execCommand('SelectAll');}}

//-->

</script>[/QUOTE]

I managed to get a working beta at:

[URL=http://www.epourania.com/wallcalc/wallcalc.html]http://www.epourania.com/wallcalc/wallcalc.html[/URL]

I did something wrong I'm sure, but I did change the reserved word.
Copy linkTweet thisAlerts:
@Willy_DuittAug 24.2004 — Try this: onfocus="this.select()"

<i>
</i>&lt;body onLoad="document.wall_calculator.length.focus()"&gt;
&lt;h1&gt;Wall Calculator&lt;/h1&gt;

&lt;form name="wall_calculator" method="post" action=""&gt;

Wall Length:
&lt;input name="length" value="0" size="3" [color=red]onfocus="this.select()"[/color] onBlur="CalculateTotals()" /&gt;&lt;br&gt;


.....Willy

[b]Edit:[/b] BTW... Changing focus to select in the onload call would work also..

<body onload="document.wall_calculator.length.[color=red]select()[/color]">
Copy linkTweet thisAlerts:
@anothenauthorAug 25.2004 — Thanks Willy, that did it.

Now to spend three days trying to figure out how to trim off the extra digits to standard currency format.

This project has really been interesting. I'm starting to like Javascript more and more now.
×

Success!

Help @anothen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.22,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...