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);