Как отключить кнопку, если один из входов пуст (чисто Javascript) - PullRequest
Новая
       16

Как отключить кнопку, если один из входов пуст (чисто Javascript)

3 голосов
/ 20 января 2020

Я пытаюсь сделать простой создатель поста с заголовком, и я хочу, чтобы "post-btn" был отключен, а его курсор был изменен на "не разрешен", если один из входов (заголовок, текст) ) пусто (value.length === 0;), я написал функцию, используя 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>

Ответы [ 3 ]

1 голос
/ 20 января 2020

Примерно так будет довольно чистый способ сделать это: 

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>
1 голос
/ 20 января 2020

Другой способ сделать это - использовать метод 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>
1 голос
/ 20 января 2020

В настоящее время, когда изменение пользователя делает ввод непустым, вы заключаете, что все хорошо, но это не так: другой ввод все еще может быть пустым. Вы должны посмотреть на всю картину, а также проверить другие входные данные. Как только вы найдете пустое место, следует сделать вывод, что данные еще не полны.

Кроме того, я бы прослушал 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>
...