当field.value为空时禁用输入按钮

Question

我已经在jquery中看到了这个问题，但我想知道如何在javascript中完成它。到目前为止，我提出了以下内容，但我知道它并没有正确捕获nameF.value。

＆＃13;

＆＃13;

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  if (nameF.value == "") {
    formButton.classList.add("notclickable");
  }
}

go();

＆＃13;

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
  opacity: 1;
}

#form-button.notclickable {
  opacity: .1;
  pointer-events: none;
}

＆＃13;

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button">
https://stackoverflow.com/questions/ask#

＆＃13;

＆＃13;

＆＃13;

如果没有jQuery，我怎么能这样做，只使用vanilla？

谢谢！

Answer 1

您只需要一个分配给nameF的事件处理程序，以及.toggle()该类而不是add()。

.toggle()会收到一个可选的第二个参数，您可以告诉它是否应该添加或删除该类，因此您将在那里传递字符串比较。

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  formButton.classList.toggle("notclickable", nameF.value == "");
}

go();

nameF.addEventListener("input", go);

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
  opacity: 1;
}

#form-button.notclickable {
  opacity: .1;
  pointer-events: none;
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

另外，请注意您不需要类来禁用该按钮。您可以将disabled属性与:disabled选择器一起使用。这也会禁用其功能，而不仅仅是淡化它。

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function go() {
  formButton.disabled = nameF.value == "";
}

go();

nameF.addEventListener("input", go);

#form-button {
  cursor: pointer;
  outline: none;
  border: none;
  font-family: $body-font;
  font-size: 14px;
  padding: 16px;
  color: #fff;
  font-weight: 800;
  background-color: #000;
  position: relative;
  border-radius: 2px;
}

#form-button:disabled {
  opacity: .1;
  pointer-events: none;
}

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button"> https://stackoverflow.com/questions/ask#

Answer 2

尝试类似的东西！

＆＃13;

＆＃13;

var nameF = document.getElementById("name-field");

var formButton = document.getElementById("form-button");

function onChangeContent(e) {
  formButton.disabled = e.target.value !== '' ? false : true;
}

nameF.addEventListener('keyup', onChangeContent);

＆＃13;

<input type="text" name="name" class="form-style form-field" id="name-field" placeholder="Your name">
<input type="submit" value="Send" id="form-button" disabled>

＆＃13;

＆＃13;

＆＃13;