jQuery到纯香草JS

Question

我想将这个小script转换为纯vanilla JS 。

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

演示

感谢Treast，我现在在这里...几乎可以正常工作：

var elements = document.querySelectorAll('input, textarea');

for(var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.addEventListener('focus', function() {
        element.setAttribute('data-placeholder', element.getAttribute('placeholder'));
        element.setAttribute('placeholder', '');
    }),
  element.addEventListener('blur', function() {
        element.setAttribute('placeholder', element.getAttribute('data-placeholder'));
        element.setAttribute('data-placeholder', '');
    });
}

演示2

有什么想法吗？

Answer 1

$('input, textarea')将选择ALL输入或textarea。 使用Vanilla，您无法在元素列表上添加EventListener ，因此需要遍历所有元素。 并且您需要使用querySelectorAll来获得相同的列表。 同样，您不能链接addEventListener 。

因此，您的代码将是：

var elements = document.querySelectorAll（'input，textarea'）;

for(var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.addEventListener('focus', function() {
        this.setAttribute('data-placeholder', this.getAttribute('placeholder'));
        this.setAttribute('placeholder', '');
    });
    element.addEventListener('blur', function() {
        this.setAttribute('placeholder', this.getAttribute('data-placeholder'));
        this.setAttribute('data-placeholder', '');
    });
}

Answer 2

仔细看一下Patrick的评论 （甚至需要这样做）。

-

至于将代码转换为原始JS，我认为Demo 2的唯一问题是未封闭的Button标记。 我建议分解内容以提高可读性。 看看： https : //jsfiddle.net/Lebxdrwk/2/

const onFocus = event => {
  const element = event.target;
  const placeholder = element.getAttribute('placeholder');
  element.setAttribute('data-placeholder', placeholder);
  element.setAttribute('placeholder', '');
};

const onBlur = event => {
  const element = event.target;
  const dataPlaceholder = element.getAttribute('data-placeholder');
  element.setAttribute('placeholder', dataPlaceholder);
  element.setAttribute('data-placeholder', '');
}

const addEventListenersToSwapPlaceholders = element => {
  element.addEventListener('focus', onFocus);
  element.addEventListener('blur', onBlur);
}

document.querySelectorAll('input, textarea')
  .forEach(addEventListenersToSwapPlaceholders);