Making font weight normal (without any formatting) using CSS onfocus selector

Question

I have an input variale text with the following attributes:

<input type="text" style="font-style: italic; color:#808080; font-size: 16px; width: 510px;" id="categ" value="default" name="categ" onfocus="this.value = ''; this.style.color='black'; this.font_weight='normal'">

i want to clear the formatting style onfocus. It clears the color and text but not the italics weight. I have also tried font-weight and font.weight

Sorry, but this is not a really good practice and will quickly lead to unmaintainable code... You should define a stylesheet and use the `:focus` selector. Javascript simply should NOT tinker with CSS properties. — kapa, Mar 07 '13 at 00:51
Something like this ? .myDiv{ focus: "this.value = ''; this.style.color='black'; this.style.font.font_weight='normal'; } — CodeMonkey, Mar 07 '13 at 00:56
No Javascript. CSS. Let me show you... Play with [this demo](http://jsfiddle.net/QgSxy/). — kapa, Mar 07 '13 at 00:58

Nix · Answer 1 · 2013-03-07T01:14:30.267

2

You want font-weight:

this.style.fontWeight="normal"

A better way to do it is to use css:

#categ:focus{
    font-weight: normal;
    color:black;
}
#categ{
   font-style: italic; 
   color:#808080; 
   font-size: 16px; 
   width: 510px
}

edited Mar 07 '13 at 01:14

answered Mar 07 '13 at 00:53

Nix

54,648
29
144
196

no bold no italics just normal – CodeMonkey Mar 07 '13 at 00:55
javascript style properties aren't the same as in css. they are without dash and with uppercase initial of the second word – Luca Mar 07 '13 at 00:57
+1 for showing the right way – kapa Mar 07 '13 at 01:02

Luca · Answer 2 · 2013-03-07T01:00:11.040

1

if memory doesn't fail me..

this.style.fontWeight='normal'

however as bažmegakapa said in his comment - this is really bad practice. You should rather create a listener to the onfocus event - e.g. in jquery you could use the .focus() method - and have a callback function to update the css of your element.

Pure css would be even better!

edited Mar 07 '13 at 01:00

answered Mar 07 '13 at 00:50

Luca

8,624
5
45
57

not working for me :( – CodeMonkey Mar 07 '13 at 00:52

score 1 · Accepted Answer · answered Mar 07 '13 at 00:58

1

this.style.fontWeight='normal'

update

this.style.fontStyle='normal'

Preview >> jsfiddle Update >> jsfiddle

answered Mar 07 '13 at 00:58

madhushankarox

1,369
1
12
16

fiddle keeps the italics... – CodeMonkey Mar 07 '13 at 01:00
@CodeMonkey What about showing some effort and logical thinking? :) – kapa Mar 07 '13 at 01:01
updated code and the jsfiddle :) – madhushankarox Mar 07 '13 at 01:01
@bažmegakapa i have been trying diff properties... intellisense of phpStorm wasn't very helpful too.. thanks – CodeMonkey Mar 07 '13 at 01:04
1

@CodeMonkey You know what I mean. He already showed you how `font-weight` transforms into `fontWeight`. How difficult would it have been to guess the right form for `font-style`?... – kapa Mar 07 '13 at 01:06

Making font weight normal (without any formatting) using CSS onfocus selector

3 Answers3