单击时清除输入搜索文本无效

Question

为什么这个基本脚本不起作用？我已经在其他时间使用了它并且它可以工作，现在它不起作用。

<form name="form1">
  <input type="search" placeholder="Search..." required="required" onfocus="if(this.value == 'Search...') {this.value=''}" onblur="if(this.value == ''){this.value ='Search...'}" /> 
  <button type="submit"><img src="search-icon-2.png" /></button>
</form>

Answer 1

当您要更改value属性时，您正在检查并更改placeholder属性：

 <input type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" /> 

修改

如果您需要基于CSS的解决方案来解决此问题，可以在CSS文件中添加以下规则：

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

有关其他选项，请参阅此答案：How do I auto-hide placeholder text upon focus using css or jquery?

Answer 2

您可以在我测试时删除 onfocus 和 onblur ，它在Chrome浏览器上运行正常。它是用灰色写的（作为提示文本而不是普通文本）。