HTML input设置value默认值时如何避免覆盖placeholder提示

这是HTML input元素的原生标准行为，不是代码bug。placeholder的设计逻辑就是仅在输入框内容为空时展示提示文本，只要输入框存在非空value（无论是硬编码的默认值、用户输入内容还是JS动态赋值），placeholder就会自动隐藏，原生没有提供同时显示value和placeholder的配置项。

你当前的写法：

<input name="freq" type="number" placeholder="Frequency (Hz)" value="50">

初始状态下输入框值为50、非空，自然不会展示placeholder内容。

方案1：用label做常驻字段说明（最符合规范、无障碍友好） #

W3C明确不建议将placeholder作为字段的唯一说明文本，因为placeholder属于临时提示，只要输入框有值就会消失，对视障用户、忘记字段含义的用户都不友好。最稳妥的做法是用<label>绑定输入框做永久说明，默认值正常写在value属性里即可：

<!-- label和input通过id/for绑定，点击label也能聚焦输入框 -->
<label for="freq">Frequency (Hz)</label>
<input name="freq" id="freq" type="number" value="50">

你可以根据设计需求调整label样式，放在输入框上方、左侧或者右侧，无论输入框有没有值，说明文本始终可见，完全满足提示需求，也兼容所有浏览器和读屏设备。

方案2：CSS模拟同框提示效果（适配特殊设计需求） #

如果设计要求提示文本必须显示在输入框内部、和默认值同时可见，可以用CSS伪类实现零JS的模拟效果，不需要修改原生属性逻辑：

<style>
.freq-input-wrap {
  position: relative;
  display: inline-block;
}
.freq-input-wrap .inner-tip {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
  /* 让提示不会阻挡输入框的点击、输入操作 */
  pointer-events: none;
}
/* 输入框为空（原生placeholder显示时），隐藏自定义内部提示 */
.freq-input-wrap input:placeholder-shown + .inner-tip {
  display: none;
}
</style>

<div class="freq-input-wrap">
  <input name="freq" type="number" placeholder="Frequency (Hz)" value="50">
  <span class="inner-tip">Frequency (Hz)</span>
</div>

实现逻辑很简单：

• 输入框有默认值50时，原生placeholder隐藏，自定义的内部提示文本显示在输入框右侧，和数值50同时可见
• 用户清空输入框内容时，自定义提示自动隐藏，原生placeholder正常展示
• 不需要额外写JS逻辑，兼容所有现代浏览器

不要为了让placeholder显示，采用「初始value设为空，输入框聚焦时自动填入50」的实现方式：这种逻辑会导致用户未聚焦输入框直接提交表单时，字段值为空，额外增加校验成本，也不符合用户的常规操作预期。

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