占位符“搜索...”不是当我运行当前的代码

问题描述：

我觉得这是我的职能问题消失。基本上，当我点击搜索栏时，我不得不删除文本“搜索...”，而不是能够输入它。占位符“搜索...”不是当我运行当前的代码

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

为什么你使用'value'而不是'placeholder'？这就是为什么我们有'placeholder'为... – Dekel

我不知道那个好，并基于这一关我在网上找到的HTML代码。如果我摆脱了价值，并将该文本插入占位符，我会好吗？ – Nate

只需使用'placeholder'属性... – Li357

答

您的代码没有任何意义......

您只能使用占位符：

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

注意：默认情况下，您必须定义它！

我会告诉你另一个秘密：当你键入一个占位符的文本框的东西，占位符会dissapear，但我认为这是逻辑。

而且更容易使用三元条件：如果你想改变占位符的颜色属性，你可以使用这个

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>

和：

Change an HTML5 input's placeholder color with CSS

我希望这有助于。

答

你的问题就出在使用value属性，而不是placeholder属性。 value属性实际上会将文本放入文本框中。占位符属性添加一个占位符，显示示例文本，当您单击它时消失。

因此改变：

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

到：

<input placeholder="Search..." >

这取决于你正在做的，当然的，但它似乎并不像你甚至不需要JavaScript代码。所以试试没有JavaScript，看看它是否符合你的期望。

占位符“搜索...”不是当我运行当前的代码

相关推荐