webentwicklung-frage-antwort-db.com.de

jquery Hintergrund-Farbwechsel auf Fokus und Unschärfe

Ich habe folgendes Problem: Ich habe ein Formular mit drei Texteingabefeldern und möchte die Hintergrundfarbe ändern, wenn eines der Felder den Fokus hat, und es zurücksetzen, wenn es den Fokus verliert. Ich habe folgenden Code bekommen:

HTML (vereinfacht): 

<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>

jQuery 

$(document).ready(function() {
    $('input:text').focus(
    function(){
        $(this).css({'background-color' : '#FFFFEEE'});
    });

    $('input:text').blur(
    function(){
        $(this).css({'background-color' : '#DFD8D1'});
    });
});

Vielen Dank

jqueryinputbackground-color
24
Argoron

#FFFFEEE ist kein korrekter Farbcode. Versuchen Sie es stattdessen mit #FFFFEE.

16
Guffa

Was Sie zu tun versuchen, kann bis zu diesem Punkt vereinfacht werden. 

$('input:text').bind('focus blur', function() {
    $(this).toggleClass('red');
});
input{
    background:#FFFFEE;
}
.red{
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
    <input class="calc_input" type="text" name="start_date" id="start_date" />
    <input class="calc_input" type="text" name="end_date" id="end_date" />
    <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>

14
Hussein

Noch einfacher, nur CSS kann das Problem lösen:

input[type="text"], input[type="password"], textarea, select { 
    width: 200px;
    border: 1px solid;
    border-color: #C0C0C0 #E4E4E4 #E4E4E4 #C0C0C0;
    background: #FFF;
    padding: 8px 5px;
    font: 16px Arial, Tahoma, Helvetica, sans-serif;
    -moz-box-shadow: 0 0 5px #C0C0C0;
    -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #C0C0C0;
    -webkit-border-radius: 5px;
    box-shadow: 0 0 5px #C0C0C0;
    border-radius: 5px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { 
    border-color: #B6D5F7 #B6D5F7 #B6D5F7 #B6D5F7;
    outline: none;
    -moz-box-shadow: 0 0 10px #B6D5F7;
    -webkit-box-shadow: 0 0 10px #B6D5F7;
    box-shadow: 0 0 10px #B6D5F7;
}
6
JL Garcia

Getesteter Code: 

$("input").css("background","red");

Komplett: 

$('input:text').focus(function () {
    $(this).css({ 'background': 'Black' });
});

$('input:text').blur(function () {
    $(this).css({ 'background': 'red' });
});

In der Version getestet:  

jquery-1.9.1.js 
jquery-ui-1.10.3.js

0
Amin Ghaderi