我有一個包含“姓名”、“電子郵件”和“電話號碼”欄位的多部分表單。
注意：電話號碼“欄位”實際上由 10 個單獨的“個位數”欄位組成。
如果用戶不小心輸入了錯誤的號碼并需要重新開始，我想為用戶提供一個“清除電話號碼”按鈕來重置電話號碼欄位。
但是，我不希望按鈕清除他們已經輸入的所有表單資料，而只是清除集體電話號碼欄位。
我在下面輸入了我正在使用的代碼并進行了測驗。但到目前為止，“清除電話號碼”按鈕只會清除整個表格。
任何調整此代碼的幫助將不勝感激。
謝謝你，麥迪遜
HTML
<!DOCTYPE html>
<head>
</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">
) 
<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">
 - 
<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>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');
let inputs = document.querySelectorAll('input');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
</script>
<!-- End Clear Fields Button Script -->
<!-- ////////// End Phone Number ////////// -->
<!-- Start Submit Button -->
<input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button"
value="Submit Form"></div>
<!-- End Submit Button -->
</form>
</body>
</html>
CSS
.phoneField {width: 14px; text-align: center;}
uj5u.com熱心網友回復：
您只需查詢您的電話欄位元素以獲取清除電話欄位按鈕事件偵聽器。
這應該適合你let inputs = document.querySelectorAll('.phoneField');
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0];
phoneField_Wrapper.onkeyup = function(e) {
var target = e.target;
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;
}
}
}
}<!DOCTYPE html>
<head>
</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"> ) 
<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">  - 
<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>
</script>
<!-- End Advance Next Field Script -->
<!-- Start Clear Fields Button Script -->
<script>
</script>
<!-- End Clear Fields Button Script -->
<!-- ////////// End Phone Number ////////// -->
<!-- Start Submit Button -->
<input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" value="Submit Form"></div>
<!-- End Submit Button -->
</form>
</body>
</html>uj5u.com熱心網友回復：
我想你需要做的就是添加
let inputs = document.querySelectorAll(“input.phoneField“)
這實際上應該可以解決問題。（代碼未經測驗）
您可以在 querySelector 中連接 css 選擇器以更直接地選擇元素。:)
希望有幫助。
uj5u.com熱心網友回復：
.phoneField {width: 14px; text-align: center;}<!DOCTYPE html>
<html>
<head>
</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">
) 
<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">
 - 
<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>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');
/*Highlight: change this so it only selects
the phone number inputs. (use .phoneField, the dot means class # means id)
*/
let inputs = document.querySelectorAll('.phoneField');
btnClear.addEventListener('click', (e) => {
/*Highlight: e.preventDefault() prevents it from
"submitting" the form cause thats what buttons do when put
in <form> tags.*/
e.preventDefault();
inputs.forEach(input => input.value = '');
});
</script>
<!-- End Clear Fields Button Script -->
<!-- ////////// End Phone Number ////////// -->
<!-- Start Submit Button -->
<input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button"
value="Submit Form">
<!-- End Submit Button -->
</form>
</body>
</html>1.阻止提交
在 html 中，如果你放置任何型別的按鈕，無論是 還是 ，在 a 中，它都會提交。
要解決這個問題，只需使用e.PreventDefault();，雖然要做到這一點，您需要添加一個引數，
這有效：
btnClear.addEventListener('click', (event) => {
event.preventDefault();
...
}
這樣做也是如此：
btnClear.addEventListener('click', (foofoo) => {
foofoo.preventDefault();
...
}
2.確保只選擇電話號碼
您只需將 更改querySelectorAll('input')為querySelectorAll('.phoneField')
句號表示選擇類，因此類 phoneField 和 # 選擇像 #userEmail 這樣的 id。
注意：我只是修復了一些錯誤，例如末尾的 div 和缺少 html 標記。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533218.html
上一篇：反應中的動態/可變形式