代码之家  ›  专栏  ›  技术社区  ›  chawki challadia

清除输入事件-HTML和JavaScript

  •  1
  • chawki challadia  · 技术社区  · 8 年前

    我有一段HTML和JavaScript

    function validate() {
        const tabs = document.getElementsByClassName("tab");
        const input = tabs[currentTab].querySelectorAll("input[type=tel], input[type=text], input[type=time], input[type=number], input[type=email]");
        const radio = tabs[currentTab].querySelectorAll("input[type=radio]");
        const select = tabs[currentTab].getElementsByTagName("select");
        let valid = true;
        if (radio.length == 0) {
            for (let i = 0; i < input.length; i++) {
                if (input[i].value == "") {
                    valid = false;
                    break;
                }
            }
            for (let i = 0; i < select.length; i++) {
                if (select[i].value == "") {
                    valid = false;
                    break;
                }
            }
        } else if (radio[0].name == "phnum" && radio[0].checked) {
            if (input[0].value == "" || input[1].value == "") {
                valid = false;
            }
        } else if (radio[1].name == "phnum" && radio[1].checked) {
            if (input[0].value == "" || input[1].value == "" || input[2].value == "") {
                valid = false;
            }
        }
    
        if (valid) {
            document.getElementById("next").className = "prevNext";
        }
    }
        <span id="radio">
        	<label for="phnum1" class="radio-container">
        	  <input type="radio" name="phnum" id="phnum1" value="1" onchange="displayPhone(this);">1 Number
              <span class="radio"></span>
        	</label>
        	<label for="phnum2" class="radio-container">
        	  <input type="radio" name="phnum" id="phnum2" value="2" onchange="displayPhone(this);">2 Numbers
        	  <span class="radio"></span>
        	</label>
        	<label for="phnum3" class="radio-container">
        	  <input type="radio" name="phnum" id="phnum3" value="3" onchange="displayPhone(this);">3 Numbers
        	  <span class="radio"></span>
        	</label>
        </span>
       </p><br>
       <p id="ph1"  class="disable">
          <label for="phone-number1">Add a Phone Number: </label><input type="tel" name="phone-number1" id="phone-number1" class="input" placeholder="Add A Phone Number" required oninput="validate();">
       </p>
       <p id="ph2" class="disable">
          <label for="phone-number2">Add a Phone Number: </label><input type="tel" name="phone-number2" id="phone-number2" class="input" placeholder="Add A Phone Number" required onchange="validate();">
      </p>
      <p id="ph3" class="disable">
          <label for="phone-number3">Add a Phone Number: </label><input type="tel" name="phone-number3" id="phone-number3" class="input" placeholder="Add A Phone Number" required onchange="validate();">
      </p>

    它处理用户添加的输入,以便在添加了所有必要的数据时可以单击按钮。问题是,当我用后退箭头键(enter上方的键)删除输入时,即使激活条件不再适用,按钮仍保持激活状态。 谢谢你们的时间和帮助,我真的很感激D

    1 回复  |  直到 8 年前
        1
  •  1
  •   TC Schiller    8 年前

    我看到一件事,你正在设置类名,如果 valid == true 通过 document.getElementById("next").className = "prevNext"; 。

    但是如果 valid == false 。

    这可能就是为什么在清空字段时没有看到按钮消失的原因(如果我正确理解您的问题的话)。

    if (!valid) { document.getElementById("next").className = ""; } 这是一种快速而肮脏的方式来获得你需要的东西。