Question

我有一个这样的结构形式：

<form role="search" method="get" id="searchform" action="">
    <input type="text" name="s" id="s" placeholder="Search..." />
    <input type="submit" id="searchsubmit" />
</form>

我需要在您单击输入字段时更改后台提交按钮。怎么做？

Answer 1

纯CSS解决方案：

input[type="text"]:focus + input[type="submit"]{
    background-color: red;
}

演示：http://jsfiddle.net/by10et61/

选择器中的+是使它工作的原因。选择器通过具有焦点的文本输入查找提交按钮，在之前。

Answer 2

像这样：

$('#s').on('focus',function(){
  $('#searchsubmit').css('background-color','#f00');
}).on('blur',function(){
  $('#searchsubmit').css('background-color','');
});

Answer 3

这是一个易于理解的工作示例

<强>标记

<form role="search" method="get" id="searchform" action="">
    <input type="text" name="s" id="s" placeholder="Search..." />
    <input type="submit" id="searchsubmit" />
</form>

<强> Jquery的

$(document).ready(function() {
  $('#s').on('focus',function(){
     $('#searchsubmit').css('background-color','red');
  });
});

Working Bin

Answer 4

您可以尝试使用焦点和输出功能：

$('#s').focus(function(){
    $('#searchsubmit').css('background-color','#f00');
}).focusout(function() {
     //if you get back to other or previous...
    $('#searchsubmit').css('background-color','#ff0');
})

如何在点击输入时更改提交按钮

4 个答案: