如何更改提交按鈕上點擊輸入

我有一個表格這樣的結構：如何更改提交按鈕上點擊輸入

<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

如何更改提交按鈕上點擊輸入

回答

相關問題