Question

我如何删除焦点上的占位符并在模糊时再次重置它？（仅限 JavaScript）

我试过了：

const input = document.getElementById('input');

// This code is for clear placeholder value
if(input.placeholder){
    input.addEventListener('focus' , (e) => {
        input.placeholder = '';
    });
}else {
    input.addEventListener( 'blur' , () => {
        input.placeholder = 'hi'
    });
};

它的工作，但我不知道如何重置以前的值。

Answer 1

const input = document.getElementById('input');

// a variable to hold the placeholder value
let placeholerValue = ""

input.addEventListener('focus', (e) => {
  // saving the placeholder value in a variable
  placeholderValue = input.placeholder
  console.log("Saving", placeholderValue)

  // clearing the placeholder
  input.placeholder = '';
  console.log("Clearing!")
});

input.addEventListener('blur', () => {
  // restoring the placeholder from the variable
  input.placeholder = placeholderValue
  console.log("Restoring", placeholderValue)
});

<input id="input" type="text" placeholder="whatever">

Answer 2

简单地说：

const input = document.getElementById('input');


input.onfocus = () =>
  {
  if (!input.placeholerValue) input.placeholerValue = input.placeholder
  input.placeholder = ''
  }
input.onblur = () =>
  {
  input.placeholder = input.placeholerValue 
  }

Answer 3

Try if want single-line solution for it

<input id="input" type="text" onfocus="this.placeholder=''" onblur="this.placeholder= this.getAttribute('data-placeholder')" data-placeholder="whatever" placeholder="whatever" value="">

占位符删除焦点（没有 jq）

3 个答案: