如何实现表单中仅清除手机号字段的清除按钮功能

我有一个包含「姓名」「邮箱」「手机号」字段的表单，其中手机号由10个独立的单数字输入框组成。想添加一个“Clear Phone Number”按钮，仅重置手机号相关字段，不清除姓名、邮箱的内容，但目前按钮会清空整个表单，求调整代码。

解决方案 #

只需要两处修改就能实现需求：

• 给「Clear Phone Number」按钮添加type="button"属性，避免它默认触发表单提交行为
• 修改清除脚本，只选中手机号对应的输入框（即带有.phoneField类的元素），而非所有输入框

修改后的完整代码 #

HTML #

<!DOCTYPE html>
<head>
    <style>
        .phoneField {width: 14px; text-align: center;}
    </style>
</head>
<body>
<!-- START FORM -->
<form action="/formHandler.php" method="post" enctype="multipart/form-data">
    <!-- START CONTACT INFORMATION -->
    Name: <input type="text" id="userName" name="userName" class="userName_Field" placeholder="Name"><br><br>
    Email: <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" placeholder="Email"><br><br>

    <!-- ////////// Start Phone Number ////////// -->
    Phone Number:<br><br>
    <!-- Start userPhone Fields -->
    <div class="phoneField_Wrapper">
        (
        <input type="text" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" maxlength="1" placeholder="0">
        )&nbsp
        <input type="text" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" maxlength="1" placeholder="0">
        &nbsp-&nbsp
        <input type="text" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" maxlength="1" placeholder="0">
        <input type="text" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" maxlength="1" placeholder="0">
    </div>
    <br><br>
    <!-- End userPhone Fields -->

    <!-- Start Clear Fields Button -->
    <div><button type="button">Clear Phone Number</button></div>
    <!-- End Clear Fields Button -->
    <br><br>

    <!-- Start Advance Next Field Script -->
    <script>
        var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0];
        phoneField_Wrapper.onkeyup = function(e) {
            var target = e.srcElement;
            var maxLength = parseInt(target.attributes["maxlength"].value, 10);
            var myLength = target.value.length;
            if (myLength >= maxLength) {
                var next = target;
                while (next = next.nextElementSibling) {
                    if (next == null)
                        break;
                    if (next.tagName.toLowerCase() == "input") {
                        next.focus();
                        break;
                    }
                }
            }
        }     
    </script>
    <!-- End Advance Next Field Script -->

    <!-- Start Clear Fields Button Script -->
    <script>
        let btnClear = document.querySelector('button[type="button"]');
        let phoneInputs = document.querySelectorAll('.phoneField');
        btnClear.addEventListener('click', () => {
            phoneInputs.forEach(input =>  input.value = '');
        });
    </script>
    <!-- End Clear Fields Button Script -->

    <!-- ////////// End Phone Number ////////// -->

    <!-- Start Submit Button -->
    <div><input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" value="Submit Form"></div>
    <!-- End Submit Button -->
</form>
</body>
</html>

核心修改说明 #

1. 按钮类型修正：添加type="button"，避免按钮默认触发表单提交/重置行为
2. 选择器精准化：用.phoneField类选择器仅选中手机号输入框，不再操作姓名、邮箱字段
3. 按钮选择优化：通过button[type="button"]精准定位清除按钮，避免后续添加新按钮时出现冲突

内容的提问来源于stack exchange，提问作者user8322896