Question

我有一个html代码：

<div class="fieldWrapper">                                            
    <label for="id_planner_step_email_address">To:</label>
       <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
       <span>
       <a href=""><button type="button" class="btn-secondary" id="send_email_btn>
        <i class="fas fa-envelope-square"></i> Send Email:
    </button></a>
   </div>

我该如何做，以便如果对 id_planner_step_email_address 输入字段进行了任何更改， send_email_btn 将被禁用

Answer 1

为什么不将其设为只读？

无论如何-我修复了您无效的HTML-无需将按钮包装在锚点中，而您在该范围内迷失了方向

如果他们改回来，我允许改变

jQuery：

$(function() {
  $("#send_email_btn").prop("disabled", false);
  $("#id_planner_step_email_address").on("input", function() {
    $("#send_email_btn").prop("disabled", this.value!=this.defaultValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
  <label for="id_planner_step_email_address">To:</label>
  <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
  <button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
    <i class="fas fa-envelope-square"></i> Send Email: </button>
</div>

普通JS

window.addEventListener("load",function() {
  document.getElementById("send_email_btn").disabled=false;
  document.getElementById("id_planner_step_email_address").addEventListener("input", function() {
    document.getElementById("send_email_btn").disabled=this.value!=this.defaultValue;
  });
});

<div class="fieldWrapper">
  <label for="id_planner_step_email_address">To:</label>
  <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
  <button type="button" class="btn-secondary" id="send_email_btn" disabled="disabled">
    <i class="fas fa-envelope-square"></i> Send Email: </button>
</div>

Answer 2

首先修复无效的HTML，丢失一些结尾的引号"。然后，您可以通过内联oninput事件或文本元素上的input来尝试这种方式，

内联使用oninput：

function disableButton() {
  document.getElementById("send_email_btn").disabled = true;
}

<div class="fieldWrapper">
  <label for="id_planner_step_email_address">To:</label>
  <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" oninput="disableButton()" />
  <span>
       <a href=""><button type="button" class="btn-secondary" id="send_email_btn">
        <i class="fas fa-envelope-square"></i> Send Email:
    </button></a>
   </div>

无内联，使用input：

window.addEventListener('load', function() {
  document.getElementById('id_planner_step_email_address').addEventListener('input', function() {
    document.getElementById("send_email_btn").disabled = true;
  })
})

<div class="fieldWrapper">
  <label for="id_planner_step_email_address">To:</label>
  <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
  <span>
       <a href=""><button type="button" class="btn-secondary" id="send_email_btn">
        <i class="fas fa-envelope-square"></i> Send Email:
    </button></a>
   </div>

Answer 3

在此代码中，如果电子邮件返回到其原始地址，则允许禁用按钮重新启用。

var currentEmail = $("#id_planner_step_email_address").val();
$(function() {

  $("#id_planner_step_email_address").on("input", function() {
    if (currentEmail != $(this).val()) {
      $("#send_email_btn").prop("disabled", true);
    } else {
      $("#send_email_btn").prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldWrapper">
  <label for="id_planner_step_email_address">To:</label>
  <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
  <button type="button" class="btn-secondary" id="send_email_btn">
    <i class="fas fa-envelope-square"></i> Send Email: </button>
</div>

Answer 4

在您的身体末端添加一个脚本标签...，请注意您的<span>标签没有关闭。

<div class="fieldWrapper">                                            
    <label for="id_planner_step_email_address">To:</label>
    <input type="email" name="planner_step_email_address" value="a@sp.edu.sg" maxlength="254" required id="id_planner_step_email_address" />
    <span>
        <a href="">
            <button type="button" class="btn-secondary" id="send_email_btn">
                <i class="fas fa-envelope-square"></i> Send Email:
            </button>
        </a>
    </span>
</div>
<script>
    const input = document.querySelector('#id_planner_step_email_address');
    const button = document.querySelector('#send_email_btn');  
    input.addEventListener('change', button.disabled = true);  
</script>

Javascript更改输入栏位按钮

4 个答案: