如何实现输入框输入内容时自动消失的浅灰色提示文字效果

最简实现（推荐） #

HTML5 原生提供的placeholder属性可以直接实现该效果，无需额外写JS逻辑：默认显示浅灰色提示文本，用户输入内容时自动消失，内容全部删除后提示文本会自动恢复。
代码示例：

<!-- 对应提问页面标题输入框的场景示例 -->
<input type="text" placeholder="Is there an R function for finding the index element in a vector.">

<!-- 多行文本框用法一致 -->
<textarea placeholder="请输入详细问题描述"></textarea>

自定义提示文本样式 #

如果需要调整提示文本的颜色、字号、样式，可以通过CSS的::placeholder伪元素实现：

/* 全局设置所有输入框的提示文字样式 */
::placeholder {
  color: #999; /* 标准浅灰色，可自行调整色值 */
  opacity: 1; /* 兼容部分浏览器默认降低透明度的问题 */
  font-size: 14px;
}

/* 单独为某一类输入框设置 */
.title-input::placeholder {
  font-style: italic;
  color: #aaa;
}

老旧浏览器兼容方案 #

如果你的项目需要兼容IE9及更早不支持HTML5的浏览器，可以通过JS手动实现交互逻辑：

<input type="text" id="titleInput" value="Is there an R function for finding the index element in a vector." style="color: #999">
<script>
const inputEl = document.getElementById('titleInput')
const defaultTip = 'Is there an R function for finding the index element in a vector.'

// 聚焦时判断是否为默认提示，是则清空
inputEl.addEventListener('focus', () => {
  if (inputEl.value === defaultTip) {
    inputEl.value = ''
    inputEl.style.color = '#333'
  }
})

// 失焦时判断是否为空，是则恢复提示
inputEl.addEventListener('blur', () => {
  if (inputEl.value.trim() === '') {
    inputEl.value = defaultTip
    inputEl.style.color = '#999'
  }
})
</script>

注意：使用JS手动实现时，表单提交前需要判断输入内容是否等于默认提示文本，避免把提示文本当做用户输入的有效内容提交。

内容的提问来源于stack exchange，提问作者user16620643