单击时为空输入字段 - Javascript

当用户单击一个表单中的输入字段时，如果该字段是空的，我们可以通过Javascript来实现自动填充一些默认值。

以下是一种实现方式：

document.addEventListener('DOMContentLoaded', function() {
  var inputFields = document.querySelectorAll('input[type=text],input[type=email],textarea');

  for (var i = 0; i < inputFields.length; i++) {
    inputFields[i].addEventListener('focus', function() {
      if (this.value == '') {
        this.value = this.getAttribute('data-default-value');
      }
    });
    inputFields[i].addEventListener('blur', function() {
      if (this.value == this.getAttribute('data-default-value')) {
        this.value = '';
      }
    });

    // 设置默认值
    inputFields[i].setAttribute('data-default-value', inputFields[i].value);
  }
});

首先我们通过 querySelectorAll 方法选择所有的文本输入字段和文本域。然后遍历这些字段，为其添加 focus 和 blur 事件监听器，当用户单击输入框时（focus 事件）如果该字段是空的，则自动填充默认值。当用户离开输入框时（blur 事件），如果该字段的值等于默认值，则将其设置为空。

通过设置 data-default-value 属性来存储每个字段的默认值。这样我们就可以保留用户自己填写的值，同时又可以在必要时恢复默认值。

使用时，我们只需要在文本输入字段或文本域中添加 data-default-value 属性，赋值为该字段的默认值即可。

<input type="text" data-default-value="默认值" />

上述代码会自动为所有采用了 data-default-value 属性的空输入字段提供默认值，优化用户体验。