Как добавить заполнитель во время фокусировки для всех полей в форме?

Question

$('*').focus(function(){
$(this).removeAttr("placeholder");
});

Используется для работы со всеми полями в моей форме. Но я не могу найти, как добавить.

$('*').focusout(function(){
$(this).attr("placeholder","abc"); 
} 

Это используется для отдельного поля, но мне нужно для всех полей, таких как hide и show

Answer 1

Не оптимизирован, но работает

$('*:input').each(function(){
$(this).data('placeholder',$(this).attr("placeholder"))
$(this).removeAttr("placeholder");
$(this).on('focus', function(){
	$(this).attr("placeholder", $(this).data('placeholder'));
});
$(this).on('focusout', function(){
	$(this).removeAttr("placeholder");
});
});

Answer 2

Посмотрите на этот JSFiddle пример, когда вы focusout any field , заполнитель для всех входов изменяются.

<form id="form">
  <p>Form</p>
  <p><input/></p>
  <p>
    <select>
      <option id="selectPlaceholder"></option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </p>
  <p><textarea></textarea></p>
  <p>
    <button id="reset" type="button">Reset placeholder</button>
  </p>
</form>

---

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#form {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 0 auto;
  width: 300px;
}

input, select, textarea {
  width: 90%;
  text-align: center;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

---

$("input, select, textarea").focusout(function(){

    $("input, select, textarea").attr(
        'placeholder',
        'Text for the placeholder focusout'
    )
    $("#selectPlaceholder").html('Text for the placeholder focusout');

});

$('#reset').click(function(){
    $('input, select, textarea').removeAttr('placeholder');
    $('#selectPlaceholder').html('');
});