Suchleiste muss doppelt geklickt werden, bevor der Cursor erscheint

Question

Was muss ich im Code ändern, damit der Cursor nach einem Klick statt in einem Doppelklick in der Suchleiste erscheint? Oder warum verschwindet der Platzhalter nicht nach einem Klick ins Feld? (Die Grundidee des Werts und Platzhalters sollte so bleiben).

HTML

<form action="search.php" method="GET"> 
    <input type="text" name="q" id="searchbox" placeholder="" value="Suche..." maxlength="99" autocomplete ="off" onMouseDown="active();" onBlur="inactive();"/> 
    <button id="searchbutton"> Los!</button> 
</form> 

Javascript

function active(){ 
    var searchbox = document.getElementById('searchbox'); 
    if(searchbox.value == 'Suche...'){ 
     searchbox.value = '' 
     searchbox.placeholder = 'Suche...'   
    } 
} 

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

    if(searchbox.value == ''){ 
     searchbox.value = 'Suche...' 
     searchbox.placeholder = '' 
    } 
} 

Answer 1

Sie brauchen nicht alle diesen Code zu verwenden, um einen Platzhalter zu machen. Sie müssen nur das:

<form action="search.php" method="GET"> 
    <input type="text" name="q" id="searchbox" placeholder="Suche..." maxlength="99" autocomplete ="off"> 
    <button id="searchbutton"> Los!</button> 
</form> 

Und es wird funktionieren. Wenn Sie das Platzhaltertag verwenden, wenn Sie darauf klicken und mit der Eingabe beginnen, wird der Text verschwinden, Sie benötigen dafür keinen JavaScript-Code.

Und noch etwas ... dieser Code ist nicht "jQuery" -Code, es ist nur JavaScript-Code.

Um die Verwendung CSS Platzhalter Farbe zu ändern:

::-webkit-input-placeholder { 
    color: black; 
    } 

:-moz-placeholder { /* Firefox 18- */ 
    color: black; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: black; 
} 

:-ms-input-placeholder { 
    color: black; 
}