时间戳

首页 > 解决方案 > 如何使用js隐藏输入点击的输入值？

javascript - 如何使用js隐藏输入点击的输入值？

问题描述

我试图在单击时隐藏每个单独输入的输入值

我的 javascript 工作正常，但只针对列出的个人 ID。我正在寻找一种更精细的方法，它只选择单击的输入，而不必针对每个不同的 ID 重复相同的代码块 5 次

$(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>

标签： javascripthtmlcss

解决方案

也许您应该考虑改用占位符。

$(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>

推荐阅读