没有输入时禁用搜索按钮

Question

这是我的搜索框

     <div id="search1"  style="margin:0;">
        <form action="<?php bloginfo('url'); ?>"  method="get">
          <input class="search-pishrafte1" name="s" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text">
          <input class="searchsubmit" value="" type="submit">
        </form>
      </div>

现在，如果我点击提交，它将搜索文本：“搜索” 我想禁用它，我不希望该按钮在用户未输入任何内容时起作用

我试过这个：Disable button whenever a text field is empty dynamically 但没用

Answer 1

您没有正确使用 value 属性。如果您定义 value 属性，提交按钮将发送表单，因为输入已经填写。

将属性value替换为placeholder，同时不要忘记定义输入为required，像这样：

<input class="search-pishrafte1" name="s" placeholder="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" type="text" required="required" />

Answer 2

如果使用 jQuery，我使用 hide() 和 show() 函数进行编码
因此，如果 empty 输入

，将在 input 文本或删除按钮之后显示按钮

我有这样的代码：

$(document).ready(function() {
  $('.searchsubmit').hide();
  $('input[type="text"].search-pishrafte1').keyup(function() {
    if ($(this).val() != '') {
      $('.searchsubmit').show();
    } else {
      $('.searchsubmit').hide();
    }
  });
});

并删除了您的代码：

onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"

这里举例

$(document).ready(function() {
  $('.searchsubmit').hide();
  $('input[type="text"].search-pishrafte1').keyup(function() {
    if ($(this).val() != '') {
      $('.searchsubmit').show();
    } else {
      $('.searchsubmit').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="search1" style="margin:0;">
  <form action="<?php bloginfo('url'); ?>" method="get">
    <input class="search-pishrafte1" name="s" placeholder="Search" type="text">
    <input class="searchsubmit" value="Submit" type="submit">
  </form>
</div>

已更新

如果使用带有 `disabled` 功能的 javascript，我会添加。
这是 javascript 的代码：

let button = document.getElementById("search-btn")
let input = document.getElementById("input-search")

input.addEventListener("input", function(e) {
if(input.value.length == 0) {
  button.disabled = true
 } else {
  button.disabled = false
 }
})

在此代码中需要 addEventListener 到 input 以检测 input 如果键入

let button = document.getElementById("search-btn")
let input = document.getElementById("input-search")
input.addEventListener("input", function(e) {
    if(input.value.length == 0) {
    button.disabled = true
  } else {
    button.disabled = false
  }
})

<div id="search1"  style="margin:0;">
        <form action="<?php bloginfo('url'); ?>"  method="get">
          <input id="input-search" class="search-pishrafte1" name="s" placeholder="Search" type="text" required="required" />
          <input id="search-btn" class="searchsubmit" value="Submit" type="submit" disabled>
        </form>
      </div>

然后如果你想要如果我点击提交它会搜索文本：“搜索”我想禁用它。您需要将 input 中的 value 更改为 placeholder。

没有输入时禁用搜索按钮

Disable search button when there is no input

html

php

search-box

已更新