如何实现Input Box的Placeholder/Label悬停及点击文本切换动画？

结论先行 #

纯CSS能实现临时状态下的文本切换（比如悬停时、点击聚焦时），但如果需要点击后持久保留新文本（即使输入框失去焦点），就必须用JavaScript来实现——因为CSS没法跟踪“已点击”这种持久化的状态。

一、纯CSS实现临时切换（无需JS） #

如果只是要求鼠标悬停时换文本，点击聚焦时显示另一文本，失去焦点后恢复原样，纯CSS就能搞定，分两种场景：

场景1：修改Placeholder文本 #

/* 初始占位文本 */
input::placeholder {
  color: #999;
}
/* 悬停时切换占位文本 */
input:hover::placeholder {
  content: "悬停时的提示";
}
/* 点击聚焦时切换占位文本 */
input:focus::placeholder {
  content: "点击后的临时提示";
}

<input type="text" placeholder="初始文本">

场景2：关联Label文本切换 #

需要把Label和Input绑定，通过CSS伪类控制显示隐藏不同文本片段：

<label for="myInput">
  <span class="initial">初始标签</span>
  <span class="hover">悬停标签</span>
  <span class="focus">点击标签</span>
</label>
<input type="text" id="myInput">

/* 默认只显示初始文本 */
label .hover, label .focus {
  display: none;
}
/* 悬停时显示悬停文本 */
input:hover + label .initial,
input:focus + label .initial {
  display: none;
}
input:hover + label .hover {
  display: inline;
}
/* 聚焦时显示点击文本 */
input:focus + label .hover {
  display: none;
}
input:focus + label .focus {
  display: inline;
}

⚠️ 注意：这种方式下，输入框失去焦点后会立刻回到初始/悬停状态，无法保持点击后的文本。

二、JavaScript实现持久切换（必用JS） #

如果要求点击输入框后，哪怕失去焦点也保留新的文本，就需要用JS跟踪“已点击”的状态，再修改内容：

示例1：修改Placeholder文本 #

<input type="text" id="myInput" placeholder="初始文本">

<script>
const input = document.getElementById('myInput');
const initialTxt = '初始文本';
const hoverTxt = '悬停提示';
const clickedTxt = '点击后的持久提示';

// 悬停切换（未点击过才生效）
input.addEventListener('mouseenter', () => {
  if (!input.classList.contains('clicked')) {
    input.placeholder = hoverTxt;
  }
});
input.addEventListener('mouseleave', () => {
  if (!input.classList.contains('clicked')) {
    input.placeholder = initialTxt;
  }
});

// 点击聚焦后切换并标记状态
input.addEventListener('focus', () => {
  input.placeholder = clickedTxt;
  input.classList.add('clicked');
});

// 可选：如果需要取消持久状态，添加失焦事件
// input.addEventListener('blur', () => {
//   input.classList.remove('clicked');
//   input.placeholder = initialTxt;
// });
</script>

示例2：修改Label文本 #

<label for="myInput" id="inputLabel">初始标签文本</label>
<input type="text" id="myInput">

<script>
const input = document.getElementById('myInput');
const label = document.getElementById('inputLabel');
const initialTxt = '初始标签文本';
const hoverTxt = '悬停标签文本';
const clickedTxt = '点击后的持久标签';

input.addEventListener('mouseenter', () => {
  if (!input.classList.contains('clicked')) {
    label.textContent = hoverTxt;
  }
});

input.addEventListener('mouseleave', () => {
  if (!input.classList.contains('clicked')) {
    label.textContent = initialTxt;
  }
});

input.addEventListener('focus', () => {
  label.textContent = clickedTxt;
  input.classList.add('clicked');
});

// 可选：失焦后恢复初始状态
// input.addEventListener('blur', () => {
//   input.classList.remove('clicked');
//   label.textContent = initialTxt;
// });
</script>

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