点击清除输入搜索文字无效

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

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

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

有关其他选项，请参考此答案： 如何在使用CSS或jquery聚焦时自动隐藏占位符文本？

Answer 2

您可以按照我的测试删除onfocus和onblur ，它在chrome浏览器上可以正常工作。 它以灰色书写（作为提示文本，而不是普通文本）。