Question

我想在用户专注于输入字段时创建一个搜索框，提交按钮的背景将被更改。请您能帮我做到这一点。先感谢您。

import 'package:flutter_html_textview/flutter_html_textview.dart';

String html = '<img src="example.com/yourimage.png"></img><h1>Hello world!</h1><p>Some more text</p>';
new HtmlTextView(data: html);

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

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（）函数

4 个答案: