改變輸入字段的焦點輸入提交風格

Question

我試圖改變任何輸入字段焦點時的按鈕顏色。好的使用JavaScript或CSS。謝謝您的幫助。

.redbutton { 
 
    background-color:red; 
 
    }

<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form"> 
 

 
    <p class="form-field first_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label> 
 
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field last_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label> 
 
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field email pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label> 
 
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" /> 
 
    </p> 
 

 

 
    <p class="submit"> 
 
    <input type="submit" accesskey="s" value="SUBMIT" /> 
 
    </p> 
 

 

 
</form>

Answer 1

您可以使用focus和blur回調的jQuery。決定在裏面當期的狀態，做任何你想做的......

$("input[type=text]").on("focus blur", function() { 
 
    if($("input[type=text]:focus").length > 0) { 
 
     $("input[type=submit]").addClass("redbutton"); 
 
    } 
 
    else { 
 
     $("input[type=submit]").removeClass("redbutton"); 
 
    } 
 
});

.redbutton { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form"> 
 

 
    <p class="form-field first_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label> 
 
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field last_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label> 
 
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field email pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label> 
 
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" /> 
 
    </p> 
 

 
    <p class="submit"> 
 
    <input type="submit" accesskey="s" value="SUBMIT" /> 
 
    </p> 
 
</form>

Answer 2

試試這個

$(document).ready(function(){ 
 
    $("input").focus(function(){ 
 
    $("input[type='submit']").addClass("changeBg"); 
 
}); 
 
    $("input").focusout(function(){ 
 
    $("input[type='submit']").removeClass("changeBg"); 
 
}); 
 
});

.redbutton { 
 
    background-color:red; 
 
    } 
 
.changeBg{background:yellow;}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form"> 
 

 
    <p class="form-field first_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label> 
 
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field last_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label> 
 
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field email pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label> 
 
    <input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" /> 
 
    </p> 
 

 

 
    <p class="submit"> 
 
    <input type="submit" accesskey="s" value="SUBMIT" /> 
 
    </p> 
 

 

 
</form>

Answer 3

下面的代碼更改background-color提交按鈕的任何字段都是焦點

$("input").not("input[type=submit]").focus(function(){ 


     $("input[type=submit]").css("background-color","green") 
    }) 

重置提交按鈕，如果場鬆動焦點

$("input").not("input[type=submit]").blur(function(){ 


    $("input[type=submit]").css("background-color","") 
}) 

Working Fiddle

Answer 4

你可以做到這一點，像這樣的background-color：

我選擇了一個更詳細的方式的項目，但如果你願意，你可以簡化。我只是想成爲爲更清楚什麼，我選擇

ALSO改變從電子郵件字段輸入的類型，從text到input type="email"

$("p:not(:last-child) input").focus(function() { 
 
    $(this).parent("p").siblings("p").find("input[type='submit']").addClass("redbutton") 
 
     
 
}); 
 
$("p:not(:last-child) input").focusout(function() { 
 
    $(this).parent("p").siblings("p").find("input[type='submit']").removeClass("redbutton") 
 
});

.redbutton { 
 
    background-color:red; 
 
    } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form"> 
 

 
    <p class="form-field first_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2892pi_213532_2892">First Name *</label> 
 
    <input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field last_name pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label> 
 
    <input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" /> 
 
    </p> 
 

 
    <p class="form-field email pd-text required required-custom"> 
 
    <label class="field-label" for="213532_2896pi_213532_2896">Email *</label> 
 
    <input type="email" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" /> 
 
    </p> 
 

 

 
    <p class="submit"> 
 
    <input type="submit" accesskey="s" value="SUBMIT" /> 
 
    </p> 
 

 

 
</form>