如何在单击时清除文本字段并更改其颜色

Question

我有一个带有初始值为“搜索”和灰色的搜索文本框。

当用户单击时，我想清除文本并将颜色设置为黑色，以便在用户开始输入时，文本为黑色。

到目前为止，我已经实现了清除功能。我尝试添加CSS样式，但它给我一个语法错误：命名空间后缺少属性名称。

 onfocus="if(this.value == 'Search') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Search'; }"

 onfocus="if(this.value == 'Search') { this.value = ''; style="color: #000000;"; }" onblur="if(this.value == '') { this.value = 'Search'; }"

- user3020047

---

@Ankit 取决于是否需要支持旧版浏览器... - Roy

Answer 1

如果您不想支持IE9及以下版本，则应使用带有某些CSS的占位符属性，例如：

input::-webkit-input-placeholder { color: #555; }
input::-moz-placeholder { color: #555; }
input:-ms-input-placeholder { color: #555; }
input:-moz-placeholder { color: #555; }

<input type="text" placeholder="Search" />

- bugwheels94

Answer 2

正确的设置颜色方式是在DOM元素的样式属性上更改颜色属性，例如：

 this.style.color = ...

因此，如果您想支持IE9或类似版本

<input onfocus="if (this.value == 'Search') { this.value = ''; this.style.color = '#000000'; }" onblur="    if (this.value == '') { this.value = 'Search'; this.style.color = 'red'; }" value="Search" style="color: red" />

否则，Ankit的答案将是正确的方法。

- potatopeelings

---

我知道这是OP真正要求的，但如果有人输入“搜索”呢？ - bugwheels94

@Ankit - 我认为一种做法是在单词“Search”之后使用不可打印字符，这样用户想要搜索的几率就会降低（但仍然不为零：-)). - potatopeelings

是的，这可能是一种方式，或者可以添加一些类来存储输入状态。 - bugwheels94

@Ankit - 哦，是的，那是更好的方法！我没想到。 - potatopeelings