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>

Why do you use the `value` instead of the `placeholder`? This is exactly why we have `placeholder` for... — Dekel, Sep 02 '17 at 22:53
I dont know html code that well and based this off what I found online. If I get rid of value and insert that text into the placeholder will I be fine? — Nate, Sep 02 '17 at 22:55
Off topic: You should not write JavaScript without ending your commands with ";". — iquellis, Sep 02 '17 at 22:55
Douglas Crockford for example. Missing semicolons would not pass JSLint validation. — iquellis, Sep 02 '17 at 23:00

z3nth10n · Answer 1 · 2017-09-02T23:08:00.573

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.

score 0 · Answer 2 · answered Sep 02 '17 at 23:04

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.

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

2 Answers2