/    Sign up×
Community /Pin to ProfileBookmark

Another Focus Question

Copy linkTweet thisAlerts:
May 05.2004

I have 2 buttons within my form. At the moment these buttons are highlighted when the user presses TAB.

Would it be possible to set up a user definable javascript option so that the user could select whether he wanted to highlight these buttons or skip right past them?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorMay 05.2004 — something like?:

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function focusB(b){
document.forms[0].elements[b].focus()
}
function focusOff(){
document.body.focus()
}
</script>
</head>
<body>
<form>
<input name="b1" type="button" value="button 1">
<input name="b2" type="button" value="button 2">
<br><br>
<a href="#" onclick="focusB('b1')">Focus on button 1</a><br>
<a href="#" onclick="focusB('b2')">Focus on button 2</a><br>
<a href="#" onclick="focusOff()">Focus off</a><br>
</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Wee_BubbaauthorMay 05.2004 — hello many thanks for your speedy reply however this is not quite what I had in mind.

in your example, if i click 'Focus Off' then press tab a few times the cursor will highlight the buttons again despite it being 'off'.

i am dealing with a form used for repeated data entry so basically i want the focus to skip these buttons if the user wishes.

i.e.

user fills in textfield1

user presses tab

if BUTTON1 OPTION is OFF then cursor focus skips to textfield2.

if BUTTON1 OPTION is ON then cursor focuses on button immediately to right of textfield1.

user fills in textfield2

user presses tab

if BUTTON2 OPTION is OFF then cursor focus skips to textfield3.

if BUTTON2 OPTION is ON then cursor focuses on button immediately to right of textfield2.

..etc..
Copy linkTweet thisAlerts:
@KorMay 05.2004 — That you must capture the TAB keytroke and make it return false... But I am not sure if it will work... There are some keys (ESQ, Enter, F1, Alt+F4...) witch are asigned to the Browser or Operating System, not to the page, so thus they will finally do that job, nomatter you capture the key and do something else first.

I don't know for sure if TAB is amongst those keys. Give a try
Copy linkTweet thisAlerts:
@KorMay 05.2004 — I think a find something... If all you want is on TAB to pass over buttons to the next element try this:

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function focusNext(f,n){
for (i=0;i<f.elements.length;i++){
if(f.elements[i].name == n){
f.elements[i+1].focus();
}
}
}
</script>
</head>
<body>
<form>
<input name="" type="text"><br>
<input name="b1" type="button" value="button 1" onfocus="focusNext(this.form,this.name)"><br>
<input name="" type="text"><br>
<input name="b2" type="button" value="button 2" onfocus="focusNext(this.form,this.name)"><br>
<input name="" type="text"><br>
</form>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Wee_BubbaauthorMay 05.2004 — hi. this also seemed to work for me...

<html>

<head>

<script>

function noFocus(b){

document.form1.elements[b].tabIndex = -1;

}

function Focus(b,index){

document.form1.elements[b].tabIndex = index;

}

</script>

</head>



<body bgcolor="#FFFFFF" text="#000000">

<form name="form1" method="post" action="">

<input type="text" name="textfield" tabindex="1">

<input type="button" name="Button1" value="Button1" tabindex="2">

<input type="text" name="textfield2" tabindex="3">

<input type="button" name="Button2" value="Button2" tabindex="4">

</form>

<p>

<input type="button" name="Submit3" value="Button1 No Focus" onClick="noFocus('Button1')">

<input type="button" name="Submit33" value="Button1 Focus" onClick="Focus('Button1',2)">

</p>

<p>

<input type="button" name="Submit32" value="Button2 No Focus" onClick="noFocus('Button2')">

<input type="button" name="Submit322" value="Button2 Focus" onClick="Focus('Button2',4)">

</p>

</body>

</html>
×

Success!

Help @Wee_Bubba 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.14,
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,
)...