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

0

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");

   }

answered May 10, 2020 at 7:31

chirag soni

1,04512 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to hide input value on input click with js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related