请求将指定jQuery聚焦失焦脚本转换为完整的纯Vanilla JS代码

没问题，我来帮你补全并完善这段原生JS代码，实现和原jQuery脚本完全一样的功能——也就是当input或textarea获得焦点时清空占位符并保存原始内容，失去焦点时再把占位符恢复回来。

先回顾一下你提供的原jQuery代码：

$('input, textarea').focus(function() { 
  $(this).data('placeholder', $(this).attr('placeholder')).attr('placeholder', ''); 
}).blur(function() { 
  $(this).attr('placeholder', $(this).data('placeholder')); 
});

下面是补全并优化后的原生JS代码，我提供两种写法供你选择：

写法一：延续你未完成的for循环写法 #

var elements = document.querySelectorAll('input, textarea');
for(var i = 0; i < elements.length; i++) {
  var element = elements[i];
  
  // 绑定焦点事件：保存原占位符并清空当前占位符
  element.addEventListener('focus', function() {
    // 用HTML5标准的dataset存储原始占位符（对应jQuery的.data()）
    this.dataset.placeholder = this.placeholder;
    // 清空占位符
    this.placeholder = '';
  });
  
  // 绑定失焦事件：恢复原始占位符
  element.addEventListener('blur', function() {
    this.placeholder = this.dataset.placeholder;
  });
}

写法二：更现代简洁的forEach写法 #

// 遍历所有目标元素，逐个绑定事件
document.querySelectorAll('input, textarea').forEach(element => {
  element.addEventListener('focus', () => {
    // 保存原始占位符到dataset
    element.dataset.placeholder = element.placeholder;
    // 清空占位符
    element.placeholder = '';
  });
  
  element.addEventListener('blur', () => {
    // 恢复原始占位符
    element.placeholder = element.dataset.placeholder;
  });
});

关键细节说明： #

• 原生事件监听函数中的this（或箭头函数中直接引用的element）都指向当前触发事件的输入框/文本域，和jQuery里的$(this)作用一致
• element.dataset.placeholder是HTML5规范的自定义数据属性存储方式，完全等价于jQuery的.data('placeholder')，用来临时保存原始占位符内容
• element.placeholder是原生DOM元素的占位符属性，和jQuery的.attr('placeholder')功能完全相同

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