Question

我认为我的功能存在问题。基本上当我点击搜索栏时，我必须删除文本“搜索...”，而不是能够键入它。

    	
            function active(){
    		      var searchBar = document.getElementById('searchBar');

    		      if(searchBar.value == 'Search...')
                  {
    			       searchBar.value = '';
    			       searchBar.placeholder = 'Search...';
    		      }
    	    }

    	    function inactive(){
    		      var searchBar = document.getElementById('searchBar');

    		      if(searchBar.value == '')
                  {
    			       searchBar.value = 'Search...';
    			       searchBar.placeholder = '';
                  }
            }

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

Answer 1

你的代码没有意义......

您必须只使用占位符：

    	
            function active(){
    		      var searchBar = document.getElementById('searchBar');

    		      if(searchBar.placeholder == 'Search...')
    			       searchBar.placeholder = '';
    	    }

    	    function inactive()
            {
    		      var searchBar = document.getElementById('searchBar');

    		      if(searchBar.value == '')
    			       searchBar.placeholder = 'Search...';
            }

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

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

我会告诉你另一个秘密：当你在带有占位符的文本框中输入内容时，占位符会消失，但我认为这是逻辑。

使用三元条件也更容易：

var searchBar = document.getElementById('searchBar');
var isFocused = false;

function onFocus()
{
  isFocused = true;
  changeHolder();
}

function onLostFocus()
{
  isFocused = false;
  changeHolder();
}

function changeHolder() 
{
  searchBar.placeholder = isFocused ? '' : 'Search...';
}

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

如果您想更改占位符属性的颜色，可以使用它：

Change an HTML5 input's placeholder color with CSS

我希望这会有所帮助。

Answer 2

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

所以改变：

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

为：

<input placeholder="Search..." >

这取决于你当然在做什么，但看起来你甚至不需要JavaScript代码。所以在没有JavaScript的情况下尝试它，看看它是否符合您的期望。

当我运行当前代码时，占位符“搜索...”不会消失

2 个答案: