javascript - 搜索栏需要双击才能出现光标

Question

我必须在代码中进行哪些更改才能使光标在单击而不是双击后出现在搜索栏中？或者为什么单击该字段后占位符不会消失？ (值和占位符的基本思想应该保持这种方式)。

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

您不需要使用所有代码来制作占位符。你只需要这个:

<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>

它会起作用的。如果您使用占位符标记，当您单击它并开始输入时，文本将会消失，您不需要为此编写 JavaScript 代码。

还有一件事...该代码不是“jQuery”代码，它只是 JavaScript 代码。

要更改占位符颜色，请使用 CSS:

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

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

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

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