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

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

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

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

Это используется для отдельного поля, но мне нужно для всех полей, обычно таких как скрытие и отображение

вы можете использовать функцию each(). Прочтите документы

Sfili_81 22.05.2019 16:08

Чего вы пытаетесь достичь? Почему вы удаляете этот атрибут в первую очередь? Вы сделали это просто потому, что это более прямолинейно, чем необходимость использовать все несколько способов CSS, специфичных для конкретного производителя?

Kravimir 22.05.2019 18:19
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
2
83
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

$('*: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");
});
});

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

Sathish Sundharam 22.05.2019 16:18

хм, хорошо, я изменил это, :input совместим с текстовыми областями, но у выбора нет заполнителя

Antoine Aïello 22.05.2019 16:28

Взгляните на этот пример JSFiddle, когда вы фокус любой поле, заполнитель для всех входных данных изменяется.

<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('');
});

Другие вопросы по теме