Question

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

我在搜索按钮本身上遇到了麻烦。当要搜索的元素存在时，它可以很好地工作，但是如果我在输入为空白时单击它，它将返回“未找到结果”消息。我想要它什么都不做。

我主要使用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))，但是它也不起作用。

我想念什么吗？

Answer 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>

Answer 2

您可以通过以下方式修改代码：

 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;
        }
    }

我希望它会有所帮助。

Answer 3

这应该有效

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>

如何使输入字段为空时，按钮什么也不做？

3 个答案: