How to remove placeholder text in JavaScript? [duplicate]

Question

I have written some code to remove the input placeholder text and it works as expected. The problem I have is how do I reset the value of placeholder after it has been removed?

const input = document.getElementById('input'); if (input.placeholder) { input.addEventListener('focus', (e) => { input.placeholder = ''; }); } else { input.placeholder.preventDefault() };

<div class="mainInput"> <input type="text" class="input" id="input" placeholder="Enter your todo : "> <button class="btn" id="btn">Submit</button> </div> <span> Todo list : </span>

What do you mean by "reset"? Why do you remove the placeholder in the first place? — Nico Haase
– Nico Haase, Commented Dec 21, 2020 at 12:47
use remove attribute function on load : input.removeAttribute("placeholder"); — Shantun Parmar
– Shantun Parmar, Commented Dec 21, 2020 at 12:48
By default any placeholder text is removed as soon as you start typing in the input - when you clear the input it is "reset" (placeholder text reappears). I am really not sure what you are trying to achieve here beyond the default behaviour — Fraser
– Fraser, Commented Dec 21, 2020 at 12:50
if you just want to hide the placeholder then this is the solution you are looking for stackoverflow.com/questions/9707021/… — Swaraj Gandhi
– Swaraj Gandhi, Commented Dec 21, 2020 at 12:57

Dhiraj · Accepted Answer · 2020-12-21 13:14:07Z

I think this solution should work for you!

It will just reset your placeholder value.

const input = document.getElementById('input'); if (input) { // it will remove placeholder value on focus and store with dataset variable input.addEventListener('focus', (e) => { input.dataset.placeholder = input.placeholder input.placeholder = ''; }); // it will reset placeholder value on blur by dataset variable input.addEventListener('blur', (e) => { input.placeholder = input.dataset.placeholder; }); }else{ console.log("input is not defined",input); }

<div class="mainInput"> <input type="text" class="input" id="input" placeholder="Enter your todo : "> <button class="btn" id="btn">Submit</button> </div> <span> Todo list : </span>

Collectives™ on Stack Overflow

How to remove placeholder text in JavaScript? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related