Question

我的js代码有问题。如果没有输入值，我设法禁用了提交按钮，但是现在我想在存在值时再次启用它。非常感谢

// submit message
submitButton.addEventListener("click", (e) =>{
  if(userMessage.value = " ") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } if(userMessage.value != " ") {
    submitButton.setAttribute("disabled", false);
   alert("send");
  }
  // prevent default
  e.preventDefault();
})

Answer 1

您分配一个变量而不是条件，第二个分配单个空格。

submitButton.addEventListener("click", (e) =>{
  if(userMessage.value == "") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } if(userMessage.value != "") {
    submitButton.setAttribute("disabled", false);
   alert("send");
  }
  // prevent default
  e.preventDefault();
})

Answer 2

您可以将事件侦听器添加到输入元素，并侦听keyup事件。喜欢：

inputField.addEventListener('keyup', e => {
    submitButton.setAttribute("disabled", e.target.value === "");
});

Answer 3

Maby我不正确，但是您想单击禁用的按钮吗？要启用它？我认为当用户在输入字段中键入内容时，maby不会尝试这种方法。所以

// submit message
InputField.addEventListener("keyup", (e) =>{
  if(e.target.value = "") {
    submitButton.setAttribute("disabled", true);
    alert("fill field");

  } else if(e.target.value != "") {
    submitButton.setAttribute("disabled", false);
    alert("send");
 }
})

类似的东西

Answer 4

在输入中添加事件

//when page loads to be disabled 
submitButton.setAttribute("disabled", true);

//check when something is changed
userMessage.addEventListener("keyup", (e) =>{
  submitButton.setAttribute("disabled", this.value.trim() == "");
})

Answer 5

您的代码有几个问题：

您将" "和=的值分配给userMessage，但是您可能打算检查该值是否为空。使用==或什至更好的===。
您正在检查的值仅由一个空格（" " !== ""）组成。使用.trim()来实际修剪一个值周围的所有空白。
第二个if语句与第一个if语句完全相反，可以写为else语句。
您还需要检查输入是否已更改，因此将再次启用该按钮。您可以在此处的文本字段的input事件上添加事件监听器，然后启用/禁用按钮。
使用disabled将属性false设置为setAttribute在这里不起作用，因为setAttribute将其转换为 String 。因此，从技术上讲，这仍然是正确的。而是直接在输入元素上设置disabled，或使用removeAttribute重新启用它。

这里是一个示例，使用input事件来禁用和启用按钮。请注意，该按钮最初并未禁用。为了解决这个问题，我创建了checkIfSet函数，因此我可以在addEventListener上进行设置，也可以调用它来检查是否需要禁用按钮。

const submitButton = document.querySelector('#submitButton');
const userMessage = document.querySelector('#userMessage');

const checkIfSet = () => {
  const trimmedInput = userMessage.value.trim();
  if (trimmedInput == '') {
    submitButton.disabled = true;
    console.log('disabled');
  } else {
    submitButton.disabled = false;
    console.log('enabled');
  }
};

const submit = (e) => {
  console.log('send');
  e.preventDefault();
}

// submit message
userMessage.addEventListener('input', checkIfSet);
submitButton.addEventListener('click', submit);
checkIfSet();

button:disabled {
  background: red;
  opacity: .5;
}

<input type="text" id="userMessage" />
<button id="submitButton">button</button>

Answer 6

简单而简短的方法：

默认情况下禁用提交<button>
将oninput事件附加到<input/>，这将切换<button>的禁用状态

尝试

<input type="text" id="userMessage" value="" oninput="this.value == '' ?  document.querySelector('#submitButton').disabled = true : document.querySelector('#submitButton').disabled = false"/>
    
<button disabled id="submitButton">Submit</button>

启用和禁用按钮，如果

6 个答案: