How to change the input value when entering the new value

Question

I have an input with placeholder="YYYY/MM", when the user click the input to enter the data, I want the year and month to dissappear, so only "/" stays.

I already try with my code, however it doesn't work, please help/

 var birthdayId = "document.querySelector("#BIRTHDAY")"; if(birthdayId.maxlength < 4){ birthdayId.value = "/"; }

 <input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="YYYY/MM">

Answer 1

Run your code in a focus event listener.

You should be checking the length of the value, not the maxlength property, which never changes.

You shouldn't put the call to document.querySelector in quotes.

Don't set the default value of the input to YYYY/MM , since that will prevent the length test from working. The placeholder is used to display the desired format, you don't need to do it with value as well.

 var birthdayId = document.querySelector("#BIRTHDAY"); birthdayId.addEventListener("focus", function() { if (birthdayId.value.length < 4) { birthdayId.value = "/"; } });

 <input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="">