使用 jQuery 搜索输入 focus() 函数

Question

我想做一个搜索框，当用户关注输入框时，提交按钮的背景会改变。请你能帮我做到这一点。先感谢您。

<script>
$(document).ready(function(){
    $("input#bigsboxh").focus(function(){
        $("submit#bigsboxhsub").css({"background-color": "#137ff3"", "opacity": "1"});
    });
});
</script>

<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i></button>

Answer 1

您可以使用 css

来实现

查看代码片段

#bigsboxh:focus + #bigsboxhsub{
  background:red;
}

<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i>submit</button>

Answer 2

你有不必要的引号 "#137ff3""。
仅使用 id 而不是标签名称 $("#bigsboxh")

$(document).ready(function(){
    $("#bigsboxh").focus(function(){
        $("#bigsboxhsub").css({"background-color": "#137ff3", 'opacity':'1'});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search"></i>try </button>

Answer 3

您放置了额外的引号"#137ff3"" 也

而不是 $("input#bigsboxh") , $("submit#bigsboxhsub") 只使用 id 的 $("#bigsboxh"),$("#bigsboxhsub")

$(document).ready(function(){
    $("#bigsboxh").focus(function(){
        $("#bigsboxhsub").css({"background-color":"#137ff3", "opacity":1});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="bigsboxh" name="s" placeholder="search"/>
<button type="submit" id="bigsboxhsub"><i class ="fal fa-search">Search</i></button>

Answer 4

试试下面的代码。

$("#bigsboxh").focus(function(){
       $("#bigsboxhsub").css('background-color', '#137ff3');

  }).blur(function(){
       $("#bigsboxhsub").css('background-color', 'FFFFFF');
  });

使用 jQuery 搜索输入 focus() 函数

Search input focus() function with jQuery

jquery

css

onfocus