/    Sign up×
Community /Pin to ProfileBookmark

change CSS Onfocus of another specific input only

Copy linkTweet thisAlerts:
Apr 08.2009

Hi, my issue is I don’t want to use an onblur function, I want to have a button change CSS styles, but only when a specific button is clicked, I was stuffing around with ElementbyId options, but can’t seem to get anything to work.

Here is s stripped down version of my code, the last input is my attempt to get it to work.

[CODE]<html>
<head>
<style type=”text/css”>
input {color: #000; background: #ffa20f; border: 2px outset #d7b9c9}
.sta {background: #FF0000; border: 2px outset #DD0000;}
.end {color: #000; background: #ffa20f; border: 2px outset #d7b9c9}
</style>
<script type=”text/javascript” language=”JavaScript”>
function Bcber(s)
{
if (“INPUT”==event.srcElement.tagName)event.srcElement.className=s
}
</script>
</head>
<body>
<input type=”button” Id=”Is01″ value=”Show” onfocus=”Bcber(‘sta’);” onblur=”Bcber(‘end’);” />
<input type=”button” Id=”Is02″ value=”Hide” />
<br />
<input type=”button” Id=”Is03″ value=”Show” onfocus=”Bcber(‘sta’);” />
<input type=”button” Id=”Is04″ value=”Hide” />
<br />
<input type=”button” Id=”Is05″ value=”Show” onfocus=”Bcber(‘sta’);” />
<input type=”button” Id=”Is06″ value=”Hide” onfocus=”document.getElementById(‘Is05’).Bcber(‘end’)” />
</body>
</html>[/CODE]

Any idea’s … again, I want to change the CSS on focus, and change it back to normal onfocus of a different specific button (only the show ones) …

Thanks in advance. ?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 08.2009 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
input {color: #000; background: #ffa20f; border: 2px outset #d7b9c9}
.sta {background: #FF0000; border: 2px outset #DD0000;}
.end {color: #000; background: #ffa20f; border: 2px outset #d7b9c9}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
window.onload=function() {
var aButton=document.getElementsByTagName('input');
for(var i=0; i&lt;aButton.length; i+=2) {
aButton[i].onfocus=function() {this.className='sta';}; // Show button change class
aButton[i+1].onfocus=function (i) { // Hide button changes associated Show button
return function (e) {
aButton[i].className='end';
};
}(i);
}
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;input type="button" value="Show"&gt;
&lt;input type="button" value="Hide"&gt;
&lt;br&gt;
&lt;input type="button" value="Show"&gt;
&lt;input type="button" value="Hide"&gt;
&lt;br&gt;
&lt;input type="button" value="Show"&gt;
&lt;input type="button" value="Hide"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@verse_thekegauthorApr 09.2009 — Almost what I want, one problem
[CODE]aButton[i].className='end';
[/CODE]
should be applied to all six inputs, so the CSS changes if the user clicks on any of those (and those only) inputs, but remains active until focus is given to a different input.

Thanks for this, I'm having a play with the code as well just so you know, if I can get a result I will post it.
Copy linkTweet thisAlerts:
@FangApr 09.2009 — 
should be applied to all six inputs, so the CSS changes if the user clicks on any of those (and those only) inputs, but remains active until focus is given to a different input.[/QUOTE]Makes no sense, can you explain further?
Copy linkTweet thisAlerts:
@verse_thekegauthorApr 14.2009 — okay, well there's six input buttons, three of them are show buttons, I only want .sta to apply to the show buttons, and the .end to apply when a user clicks any of the buttons.

The above code allows the user to click on all three show buttons, and have .sta appear on all of the show buttons at the same time which isn't quite what is needed. .sta should only be applied to the last show button, and .end needs to be applied when ever a user clicks any other button. onblur doesn't work cause as soon as you put focus in another input (text, button, submit) the .end style is applied.
Copy linkTweet thisAlerts:
@FangApr 16.2009 — window.onload=function() {
var aButton=document.getElementsByTagName('input');
for(var i=0; i&lt;aButton.length; i+=2) {
aButton[i].onfocus=function() {this.className='sta';}; // Show button change class
aButton[i+1].onfocus=function() {clearAll(aButton);};
}
};

function clearAll(aButton) {
for(var i=0; i&lt;aButton.length; i+=2) {
aButton[i].className='end';
}
}
Copy linkTweet thisAlerts:
@verse_thekegauthorApr 17.2009 — Thanks Fang,

With this code I could still highlight all the three 'show' buttons at the same time. The Hide button removes all the .sta CSS though, so it's very close, I only want to be able to apply the .sta CSS style to one show button at a time.
×

Success!

Help @verse_thekeg 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.18,
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,
)...