Placeholder "Search..." not disappearing when I run the current code

Question

I think there is a problem with my functions. Basically when I click on the search bar, I have to delete the text "Search..." rather than being able to type over it.

     
            function active(){
            var searchBar = document.getElementById('searchBar');

            if(searchBar.value == 'Search...')
                  {
              searchBar.value = '';
              searchBar.placeholder = 'Search...';
            }
         }

         function inactive(){
            var searchBar = document.getElementById('searchBar');

            if(searchBar.value == '')
                  {
              searchBar.value = 'Search...';
              searchBar.placeholder = '';
                  }
            }

   <form action="search.php" method="post">

    <input type="text" id="searchBar" placeholder="" value="Search..." maxlength="30" autocomplete="on" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchBtn" value="Go!" />

   </form>

Answer 1

Your code doesn't make sense...

You must use only placeholder:

     
            function active(){
            var searchBar = document.getElementById('searchBar');

            if(searchBar.placeholder == 'Search...')
              searchBar.placeholder = '';
         }

         function inactive()
            {
            var searchBar = document.getElementById('searchBar');

            if(searchBar.value == '')
              searchBar.placeholder = 'Search...';
            }

   <form action="search.php" method="post">
    <input type="text" id="searchBar" placeholder="Search..." maxlength="30" autocomplete="on" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchBtn" value="Go!" />
   </form>

Note: By default you must define it!

I will tell you another secret: When you type something on a textbox with a placeholder, the placeholder will dissapear, but I think this is logic.

Also is easier to use ternary conditions:

var searchBar = document.getElementById('searchBar');
var isFocused = false;

function onFocus()
{
  isFocused = true;
  changeHolder();
}

function onLostFocus()
{
  isFocused = false;
  changeHolder();
}

function changeHolder() 
{
  searchBar.placeholder = isFocused ? '' : 'Search...';
}

       <form action="search.php" method="post">
        <input type="text" id="searchBar" placeholder="Search..." maxlength="30" autocomplete="on" onMouseDown="onFocus();" onBlur="onLostFocus();"/><input type="submit" id="searchBtn" value="Go!" />
       </form>

And if you want to change the color of the placeholder attribute you can use this:

Change an HTML5 input's placeholder color with CSS

I hope this helps.

Answer 2

Your problem lies in using the value attribute rather than the placeholder attribute. The value attribute actually puts text in your textbox. The placeholder attribute adds a placeholder showing sample text which disappears when you click it.

So change:

<input placeholder="" value="Search..." >

to:

<input placeholder="Search..." >

It depends on what you are doing of course, but it does not seem like you even need the JavaScript code. So try it without JavaScript and see if it does what you are expecting.