我怎样才能做到，当输入字段为空时，按钮什么也不做？答案

【问题标题】：How can I make it so that when input field is empty, button does nothing?我怎样才能做到，当输入字段为空时，按钮什么也不做？
【发布时间】：2019-07-17 12:49:41
【问题描述】：

我正在制作一个简单的搜索器，用户在其中输入查询，点击搜索，程序会返回所述元素的位置或“未找到结果”行。

搜索按钮本身有问题。当正在搜索的元素存在时它工作得很好，但是如果我在输入为空白时单击它，它会返回“未找到结果”消息。我希望它什么都不做。

我主要使用 JavaScript。到目前为止，我尝试的是创建一个 if 语句来检查输入的长度，然后从 DOM 中选择元素并在长度为 0 时禁用它。

我尝试同时添加console.log 和alert() 来检查按钮的状态（启用/禁用），无论输入值的长度如何，它们都可以正常工作。

<button value="submit" id="button" data-key="13" onclick="clickFunction()">
</button>


function clickFunction() {
    var input = document.getElementById('input_id').value;
    var input = input.toLowerCase();

    /* disables button if there is no input */
    if ( input.length === 0 ) {
        document.getElementById("button").disabled = true;
        console.log("disabled");
    } else if (input.length > 0) {
        document.getElementById("button").disabled = false;
        console.log("enabled");
    }
}

我也尝试过使用 jQuery ($("#button").attr("disabled", true))，但它也不起作用。

我错过了什么吗？

【问题讨论】：

var input = ...; var input = .... 不要像对同一个变量那样反复使用 var。
所以使用 return false 或 preventDefault。 HTML 5 验证会容易得多。
你是如何触发你的按钮被禁用，当输入字段为空并且无法再次触发时你的代码不起作用，你应该在你的输入元素上按键事件

标签： javascript button input

【解决方案1】：

您需要停止点击，通过点击禁用按钮意味着您将无法启用它。

function clickFunction(evt) {
  var input = document.getElementById('input_id').value.trim();
  // if (!input.length) { evt.preventDefault(); }
  if (!input.length) return false;  // cancel click
  return true
}

<form>
  <input type="search" id="input_id" name="input_id" />
  <button value="submit" id="button" data-key="13" onclick="clickFunction(event)">
  </button>
</form>

但是为什么要使用 JavaScript，让 HTML 为你做。

<form>
  <input type="search" name="search" required />
  <input type="submit" />
</form>

【讨论】：

【解决方案2】：

这应该可以工作

function validate(obj) {
    if (obj.value.length > 0) {
        document.getElementById("btnSave").disabled = false;
    } else {
        document.getElementById("btnSave").disabled = true;
    }
}

<input type="text" id="txtName" onkeyup="validate(this)"/>
<button disabled id="btnSave">save</button>

【讨论】：

如果他们没有键盘粘贴怎么办？
stackoverflow.com/questions/6290442/…
伙计们请检查上面的堆栈帖子，当控件失去焦点时会触发 onchange 事件，这就是我们可以使用 onkeyup 或 keypress 事件的原因

【解决方案3】：

你可以用这种方式修改你的代码：

 function clickFunction() {
        var input = document.getElementById('input_id').value;
        input = input.toLowerCase();

        if (input.length) {
            // write your search logic here
        } else {
           // won't do anything
            return false;
        }
    }

我希望它会有所帮助。

【讨论】：