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

我有一个表格这样的结构：如何更改提交按钮上点击输入

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

我需要当你点击输入字段来改变背景提交按钮。怎么做？

来源

2014-11-25 Ihor Tkachuk

，什么是你在这种情况下尝试？您生成的任何代码？ – Beri 2014-11-25 08:08:31

所以我尝试了： #searchform input [type ='text']：focus #searchsubmit { background：url（“../ images/submit.png”）0 -14px no-repeat; } 但它不工作 – 2014-11-25 08:13:17

纯CSS解决方案：

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

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

在选择的+是什么使得它的工作。选择器通过具有焦点的文本输入来查找提交按钮，其是先于。

来源

2014-11-25 08:14:43 ONOZ

像这样：

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

来源

2014-11-25 08:08:07

这里是工作的例子，很容易和清晰的理解

标记

<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

来源

2014-11-25 08:12:36 user3811714

将您的jsbin的代码粘贴到答案。如果链接停止工作，您的答案将变得毫无用处，因此请确保将相关代码作为文本放入其中。 – 2014-11-25 08:16:29

@DerVampyr刚刚运行了链接，它运行良好 – user3811714 2014-11-25 08:20:01

是的，但如果6个月内有人遇到这个问题，Google会在这里解决他的问题呢？ jsbin链接也会在这个时候工作吗？你不能确定，所以建议把代码放在答案中。 – 2014-11-25 08:22:56

可以拥有专注和输出功能都试试吧：

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

来源

2014-11-25 08:17:05 Riad

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

回答

相关问题