Placeholder "Rechercher ..." ne disparaît pas lorsque j'exécute le code actuel

Question

Je pense qu'il y a un problème avec mes fonctions. Fondamentalement, lorsque je clique sur la barre de recherche, je dois supprimer le texte "Rechercher ..." plutôt que de pouvoir taper dessus.

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

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

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

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

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

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

 
    \t </form>

Answer 1

Votre code n'a pas de sens ...

vous devez utiliser l'espace réservé:

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

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

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

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

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

Note: Par défaut, vous devez le définir!

Je vais vous dire un autre secret: Lorsque vous tapez quelque chose sur une zone de texte avec un espace réservé, l'espace réservé disparaîtra, mais je pense que c'est logique.

est plus facile à utiliser également les conditions ternaires:

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

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

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

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

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

Et si vous voulez changer la couleur de l'espace réservé attribut que vous pouvez utiliser ceci:

Change an HTML5 input's placeholder color with CSS

J'espère que cela aide.

Answer 2

Votre problème réside dans l'utilisation de l'attribut value plutôt que de l'attribut placeholder. L'attribut value met du texte dans votre zone de texte. L'attribut espace réservé ajoute un espace réservé affichant un exemple de texte qui disparaît lorsque vous cliquez dessus.

changer donc:

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

à:

<input placeholder="Search..." > 

Cela dépend de ce que vous faites bien sûr, mais il ne semble pas que vous avez même le code JavaScript. Alors essayez-le sans JavaScript et voyez s'il fait ce que vous attendez.