如何用JavaScript实现输入框失焦时为空则回填初始值？

这问题很常见，我来给你两个实用的方案，既能保留你需要的「聚焦清空」功能，又能解决失焦后内容为空时的回填需求：

方案一：内联事件（快速实现，适合单个输入框） #

直接修改你的input标签，添加存储初始值的data属性，同时完善onfocus和新增onblur事件：

<input 
  style="width: 70px;" 
  type="text" 
  value="{{ $p->price }}" 
  class="form-control" 
  {{ Auth::user()->role < 3 ? '' : 'readonly' }}
  data-original-value="{{ $p->price }}"
  onfocus="if (this.value === this.dataset.originalValue) this.value = '';"
  onblur="if (!this.value.trim()) this.value = this.dataset.originalValue;"
/>

逻辑说明： #

• data-original-value="{{ $p->price }}"：把初始价格存储在自定义属性里，作为后续回填的依据，避免丢失原始值。
• 优化onfocus：只有当当前值等于原始值时才清空，避免用户已经输入内容后再次聚焦被误清空。
• onblur事件：失焦时检查内容（用trim()过滤纯空格的情况），如果为空就自动回填原始价格。

方案二：分离式事件监听（更易维护，适合多个输入框） #

如果页面中有多个类似的输入框，或者你更倾向于HTML和JS代码分离，推荐这种方式：

首先修改HTML，给输入框加一个标识类（比如price-input），并保留data-original-value属性：

<input 
  style="width: 70px;" 
  type="text" 
  value="{{ $p->price }}" 
  class="form-control price-input" 
  {{ Auth::user()->role < 3 ? '' : 'readonly' }}
  data-original-value="{{ $p->price }}"
/>

然后添加一段JavaScript代码，批量绑定事件：

document.querySelectorAll('.price-input').forEach(input => {
  // 聚焦事件处理
  input.addEventListener('focus', function() {
    if (this.value === this.dataset.originalValue) {
      this.value = '';
    }
  });

  // 失焦事件处理
  input.addEventListener('blur', function() {
    if (!this.value.trim()) {
      this.value = this.dataset.originalValue;
    }
  });
});

优势： #

• 代码结构更清晰，HTML和逻辑分离，便于后续修改维护。
• 一次性给所有带price-input类的输入框绑定功能，不用重复写内联事件。

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