如何在纯Javascript中实现，当输入框为空时禁用按钮？

Question

我正在尝试制作一个简单的帖子创建器，其中包含标题，如果其中一个输入（标题，文本）为空（value.length === 0;），则我想使“post-btn”被禁用，其光标变为“not-allowed”。 我使用了forEach和eventListener编写了一个函数，但它实际上并没有起作用。我考虑另一种方法是为每个输入添加一个eventListener，但我无法想象任何不需要编写大量if语句的简短方法。因此，我决定寻求帮助，如果您可以更正我在这里犯的错误或帮助我编写一个全新的有效且易于理解的代码。

更明确地说，如果标题为空，则按钮被禁用，如果文本为空，则按钮也被禁用，如果两者都不为空，则按钮变为启用状态。

let createPostBehavior = function(){
  let inputs = document.querySelectorAll('.post-input');
  let postBtn =  document.querySelector('.post-btn');

  inputs.forEach(function(inp){
    inp.addEventListener('input', function(e){
      if(e.target.value.length === 0) {
        postBtn.disabled = true;
        postBtn.style.cursor = 'not-allowed';
      } else if (e.target.value.length > 0) {
        postBtn.disabled = false;
        postBtn.style.cursor = 'pointer';
      }

    })
  })
}
createPostBehavior();

<div class="create-post-wrapper">
        <div>
                <p class="sub-headline">Create a new post</p>
        </div>
        <div>
                <input class="post-input" type="text" placeholder="Title">
        </div>
        <textarea id="input" class="post-input"></textarea>
        <div class="buttons-wrapper">
                <button class="post-btn">Post</button>
        </div>
</div>

- Salah Eddine Makdour

---

你的代码是有效的（前提是你实际上在某个地方调用了 createPostBehavior()）。我唯一要添加的更改是，在开始时应该将 post-btn 初始化为禁用状态，因为两个输入都为空。 - marzelin

我认为您应该在输入任何一个值时都检查两个输入的值，因为您需要验证两个值。当然，您可以只使用HTML的“required”属性而不混乱于按钮的禁用状态，但这是不同的用户体验。 - Heretic Monkey

Answer 1

目前，当用户更改使输入不为空时，您认为一切都很好，但这是错误的：另一个输入仍然可能为空。您必须查看整个情况，并检查其他输入。只要找到一个为空的输入，就应该得出结论数据仍然不完整。

此外，我会在包装元素上监听“input”事件：这样您只需要附加一个侦听器。然后使用“some”来查找是否仍有空输入 - 迭代所有输入元素。

let postBtn = document.querySelector('.post-btn');
let wrapper = document.querySelector('.create-post-wrapper');
let inputs = [...wrapper.querySelectorAll('.post-input')];

function validate() {
  let isIncomplete = inputs.some(input => !input.value);
  postBtn.disabled = isIncomplete;
  postBtn.style.cursor = isIncomplete ? 'not-allowed' : 'pointer';
}

wrapper.addEventListener('input', validate);
validate();

<div class="create-post-wrapper">
  <div>
    <p class="sub-headline">Create a new post</p>
  </div>
  <div>
    <input class="post-input" type="text" placeholder="Title">
  </div>
  <textarea id="input" class="post-input"></textarea>
  <div class="buttons-wrapper">
    <button class="post-btn">Post</button>
  </div>
</div>

- trincot

---

哇，我从来没有听说过那个“some”的东西。感谢你的帮助并让我知道了这个功能。 - Salah Eddine Makdour

Answer 2

这样做是一种相当简洁的方式：

const form = document.querySelector('form');
const inputTitle = form.querySelector('input[type="text"]');
const inputContent = form.querySelector('textarea');
const submitButton = form.querySelector('button');

submitButton.disabled = true;

const state = {
  title: '',
  content: ''
};

const updateButton = () => {
  submitButton.disabled = !(state.title && state.content)
};

inputTitle.addEventListener('input', event => {
  state.title = event.target.value;
  updateButton();
});

inputContent.addEventListener('input', event => {
  state.content = event.target.value;
  updateButton();
});

form {
  display: flex;
  flex-direction: column;
}

form input,
form textarea {
  margin-top: 10px;
  padding: 5px;
}

form button {
  margin-top: 10px;
  padding: 5px;
  background-color: #8FBC8F;
  cursor: 'not-allowed';
}

form button:disabled {
  background-color: #EEE;
  cursor: 'pointer';
}

<div>
  <p>Create a new post</p>
  <form>
    <input type="text" placeholder="Title">
    <textarea > </textarea>
    <button>Submit</button>    
  </form>
</div>

- ajobi

---

之前的回答更简短且能够完成任务，无论如何还是感谢您的帮助。 - Salah Eddine Makdour

Answer 3

另一种方法是使用filter方法。在本例中，我们将其用作查找值长度为0的任何输入的方法。之后，我们只需对按钮执行所需的操作即可。

let inputs = document.querySelectorAll('.post-input');
let postBtn =  document.querySelector('.post-btn');

inputs.forEach(inp => inp.addEventListener('input', checkInputs));
  
function checkInputs(event) {
    const inputArray = [...inputs];
    const missingInput = inputArray.filter(inp => inp.value.length === 0).length > 0;
    toggleButton(missingInput);
  }
  
function toggleButton(toggle) {
    postBtn.disabled = toggle;
    postBtn.style.cursor = toggle ? "not-allowed" : "pointer";
  }

<div class="create-post-wrapper">
        <div>
                <p class="sub-headline">Create a new post</p>
        </div>
        <div>
                <input class="post-input" type="text" placeholder="Title">
        </div>
        <textarea id="input" class="post-input"></textarea>
        <div class="buttons-wrapper">
                <button style="cursor: not-allowed" disabled class="post-btn">Post</button>
        </div>
</div>

- Alain Cruz

---

也可以！感谢您的帮助。 - Salah Eddine Makdour