How to hide input value on input click with js?

Question

I am trying to hide the input value of each individual input when clicked

My javascript is working fine but only targets the individual ID listed. I am looking for a more refined method that selects only the clicked input without having to repeat that same block of code 5 times targeting each different ID

$(document).ready(function() { var text = document.getElementById('first_name'); var button = document.getElementById('first_name'); button.onclick = function() { text.value = ''; text.classList.add("lowercase"); } });

input[type=text] { display: block; border: none; border-bottom: 1px solid; width: 100%; padding: 2rem 0 1rem; } input, input[type=submit] { font-family: 'usm', sans-serif; font-size: 0.7rem; letter-spacing: 1pt; text-transform: uppercase; color: #7A7A7A; } input.lowercase { text-transform: none !important; letter-spacing: 0 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <form method="post" action=""> <input type="text" name="first_name" id="first_name" value="First Name*"> <br> <input type="text" name="last_name" id="last_name" value="Last Name*"> <br> <input type="text" name="email" id="email" value="Email Address*"> <br> <input type="text" name="phone" id="phone" value="Phone Number"> <br> <input type="text" name="message" id="message" value="Message*"> <div class="submit" > <input type="submit" name="submit" value="Send" id="submit"> </div><!-- End of Submit --> </form> </body>

I dont get your question, so you want the placeholders to disappear as soon as the user clicks one of them? — JSRB
– JSRB, Commented May 10, 2020 at 7:21

brk · Accepted Answer · 2020-05-10 07:22:15Z

You can use jquery selector and use $(this)

$(document).ready(function() { $('input[type="text"]').on('click', function(e) { $(this).val(''); $(this).addClass('lowercase') }) });

input[type=text] { display: block; border: none; border-bottom: 1px solid; width: 100%; padding: 2rem 0 1rem; } input, input[type=submit] { font-family: 'usm', sans-serif; font-size: 0.7rem; letter-spacing: 1pt; text-transform: uppercase; color: #7A7A7A; } input.lowercase { text-transform: none !important; letter-spacing: 0 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <form method="post" action=""> <input type="text" name="first_name" id="first_name" value="First Name*"> <br> <input type="text" name="last_name" id="last_name" value="Last Name*"> <br> <input type="text" name="email" id="email" value="Email Address*"> <br> <input type="text" name="phone" id="phone" value="Phone Number"> <br> <input type="text" name="message" id="message" value="Message*"> <div class="submit"> <input type="submit" name="submit" value="Send" id="submit"> </div> <!-- End of Submit --> </form>

antlis · Accepted Answer · 2020-05-10 07:28:46Z

Maybe you should consider using placeholdr instead.

$(document).ready(function() { $('form input[type="text"]').on('click', function() { this.value = ''; }); });

input[type=text] { display: block; border: none; border-bottom: 1px solid; width: 100%; padding: 2rem 0 1rem; } input, input[type=submit] { font-family: 'usm', sans-serif; font-size: 0.7rem; letter-spacing: 1pt; text-transform: uppercase; color: #7A7A7A; } input.lowercase { text-transform: none !important; letter-spacing: 0 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <input type="text" name="palceholder_example" id="placeholdr_example" placeholder="Place holder example"> <form method="post" action=""> <input type="text" name="first_name" id="first_name" value="First Name*"> <br> <input type="text" name="last_name" id="last_name" value="Last Name*"> <br> <input type="text" name="email" id="email" value="Email Address*"> <br> <input type="text" name="phone" id="phone" value="Phone Number"> <br> <input type="text" name="message" id="message" value="Message*"> <div class="submit" > <input type="submit" name="submit" value="Send" id="submit"> </div><!-- End of Submit --> </form> </body>

chirag soni · Accepted Answer · 2020-05-10 07:31:58Z

Define one function with input parameter as id and call this fn in an individual input element by passing that element's id.

 function clearText(id) { var text = document.getElementById(id); var button = document.getElementById(id); button.onclick = function() { text.value = ''; text.classList.add("lowercase"); }

Collectives™ on Stack Overflow

How to hide input value on input click with js?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related