在光标出现之前,需要双击搜索栏

时间:2016-10-24 18:12:17

标签: javascript jquery html searchbar

我需要更改代码才能在单击一次而不是双击后让光标出现在搜索栏中?或者为什么占位符在单击一下后不会消失? (价值和占位符的基本思想应该保持这种方式)。

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 = ''   
     }
}

1 个答案:

答案 0 :(得分:2)

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

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