Search code examples
javascriptjquerycssonbluronfocus

onFocus .css and onblur .css

My HTML has a placeholder like such:

<input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within')this.value='';" onblur="if (this.value=='')this.value='Search Within';">

It wasn't my choice and I can't really remove it... but I was wondering how I can set the CSS too... I want to do something like onfocus="if (this.value=='Search Within')this.value=''; $(this).css('color','000000');" and onblur="if (this.value=='')this.value='Search Within';$(this).css('color', 'A9A9A9');". How can I accomplish that?

Thanks

Solution

  • Actually, you pretty much provided the code with the exception of two mistakes:

    1. You need a # before your colors.
    2. You need to wrap your conditionals in braces

    Everything else was fine (I changed the colors to make it more obvious what was happening):

    <input id="additionalsearch" type="text" value="Search Within" onfocus="if (this.value=='Search Within'){this.value='';$(this).css('color','#00ff00');}" onblur="if (this.value==''){this.value='Search Within';$(this).css('color', '#ff0000');}">

    http://jsfiddle.net/A4cuy/6/

    Of course, this ends up being really ugly code and you are advised to put the javascript in separate handlers.