0

I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.

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

I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:

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

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

^^made a single function that can be used for both textarea and sets

How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:

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

function originalValue(e){
    e.currentTarget.placeholder= default value/original value;
}
nishkaush
  • 1,512
  • 1
  • 13
  • 20
  • 1
    Huh? What you're describing is the *default behaviour of placeholders* - you dont have to manually clear/reset them! – Jamiec Jan 18 '17 at 09:18
  • Hi Jamiec, every time i click on a box, the placeholder disappears. but if I don't enter a value and click somewhere else, it doesn't regain the placeholder. Thats where I am stuck... – nishkaush Jan 18 '17 at 09:24
  • That because you have cleared the placeholder. try it with just a textbox with a `placeholder` attribute and without any code to affect it. – Jamiec Jan 18 '17 at 09:25
  • Can you explain that a little? I didn't understand what you were asking me to do – nishkaush Jan 18 '17 at 09:30

1 Answers1

0

Try out this textbox

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

As you can see there is no code whatsoever, and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.

I seriously don't understand why you even began to write code around this!

If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur. 

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>

I think this is a terrible idea FWIW!

Jamiec
  • 133,658
  • 13
  • 134
  • 193
  • Hi Jamiec, I did exactly that to start with but the placeholder stayed until the user started to type. I wanted to add in the functionality that as soon as the user clicks on the box, the placeholder should disappear and not wait until the user starts to type. – nishkaush Jan 18 '17 at 09:36
  • @nishkaush That's the RIGHT behaviour. Why would you want to change a behaviour that a user is used to, and makes sense. Thats just bad UX! – Jamiec Jan 18 '17 at 09:49
  • @nishkaush I have updated my answer with what you want to do. Doesn't stop it being a terrible idea, but if you wnt to confuse your users, thats up to you. – Jamiec Jan 18 '17 at 09:52