Используя ту же функцию для различных элементов DOM

Question

Я ввод и текстовые блоки, которые имеют различные заполнители, такие как «количество повторений», «время, необходимое в сек» и т.д.

<input type="text" id="sets" placeholder="Number of sets"> 
<textarea id="textarea" placeholder="write"></textarea> 

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

textarea.addEventListener("click",checkInput); 
sets.addEventListener("click",checkInput); 

function checkInput(e){ 
    e.currentTarget.placeholder=""; 
} 

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

Как я могу получить заполнитель назад, если пользователь нажимает на поле, но не ввести значение и переходит к другому элементу (событие размытия) с помощью одной функции для всех элементов, как так:

textarea.addEventListener("blur",originalValue); 
reps.addEventListener("blur",originalValue); 

function originalValue(e){ 
    e.currentTarget.placeholder= default value/original value; 
} 

Answer 1

Попробуйте это текстовое поле

<input type="text" placeholder="Enter a value">

Как вы можете видеть, что нет никакого кода , что, и он делает именно то, что вы хотите; если пользователь вводит какой-либо текст, то местозаполнитель удаляется. Если пользователь не вводит текст (или удаляет существующий текст), то местозаполнитель восстанавливается при размытии.

Я серьезно не понимаю, почему вы даже начали писать код вокруг этого!

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

textarea.addEventListener("click",checkInput); 
 
sets.addEventListener("click",checkInput); 
 
textarea.addEventListener("blur",restore); 
 
sets.addEventListener("blur",restore); 
 

 
function checkInput(e){ 
 
    e.currentTarget.originalPlaceholder = e.currentTarget.placeholder 
 
    e.currentTarget.placeholder=""; 
 
} 
 

 
function restore(e){ 
 
    e.currentTarget.placeholder = e.currentTarget.originalPlaceholder; 
 
}

<input type="text" id="sets" placeholder="Number of sets"> 
 
<textarea id="textarea" placeholder="write"></textarea>

Я думаю, что это ужасная идея FWIW!