tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
1125
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Rudi_R Rudi_R ist offline Grünschnabel
    Registriert seit
    Dec 2003
    Beiträge
    4
    Hi,
    Also ich hab folgendes Problem:
    Ich hab ein so ein nettes Input Feld auf meiner Page. Es hat eine Klasse mit einem Hintergrundbild wenn die Seite geladen wird.
    Mit einem onFocus ändert sich dabei der ClassName damit es ein wenig dynamisch wirkt und das Hintergrundbild verschwindet, damit man den Text gut lesen kann.
    Mit OnBlur wird eine javascript Funktion aufgerufen, die nachguckt ob in dem Feld nun was drin steht oder nicht. Wenn ja, dann ändert es nur die Klasse, wenn nein fügt es wieder das Hintergrundbild ein und ändert die Klasse.
    Hier mal ein wenig Code:

    Mein Textfeld:
    Code :
    1
    2
    3
    4
    
    .... html
    <input type="text" id="username" name="username" class="form_username" value="" 
    size="15" OnFocus="this.className='form_on'" OnBlur="javascript:flush_input(username)">
    ....html

    Dann das Javascript:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    function flush_input(id){
    if (document.getElementById(id).value != '') {
     document.getElementById(id).style.backgroundImage = '';
     document.getElementById(id).className = 'form_off';
     }else {
    document.getElementById(id).style.backgroundImage = 'url(img/' + id + '.jpg)';
    document.getElementById(id).className = 'form_'+id;
    }
    }

    Die css noch, damit ihr euch das besser vorstellen könnt. Auch wenn sie nicht von Bedeutung sind:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    
    .form_on {
        font-size: 8pt; 
        font-family: Verdana; 
        color: #656363; 
        background-color: #C5C5C5; 
        border: 1px solid #939394;
        cursor:default;
    }
    .form_off {
        font-size: 8pt; 
        font-family: Verdana; 
        color: #656363; 
        background-color: #8E8E8E; 
        border: 1px solid #939394;
        cursor:default;
    }
    .form_username {
        font-size: 8pt; 
        font-family: Verdana; 
        color: #656363; 
        background-image:url('img/form_username.gif');
        background-repeat: no-repeat; 
        border: 1px solid #939394;
        cursor:default;
        }

    Danke schonmal im Voraus wenn mir irgendjemand helfen kann. Es is ja eigentlich ein nicht allzu großes Problem, das hab ich mir zumindest am Anfang gedacht ...
     

  2. #2
    Registriert seit
    Nov 2002
    Ort
    Altdorf bei Nürnberg
    Beiträge
    3.027
    Code :
    1
    
    onblur="flush_input('username');"
    Sollte gehen
     

  3. #3
    Rudi_R Rudi_R ist offline Grünschnabel
    Registriert seit
    Dec 2003
    Beiträge
    4
    *kopfstoß*
    aber danke für die schnelle hilfe..
     

Ähnliche Themen

  1. input size der Stringlänge anpassen
    Von klanawagna im Forum Javascript & Ajax
    Antworten: 8
    Letzter Beitrag: 18.02.10, 15:16
  2. Hintergrund anpassen
    Von Dominik82 im Forum Photoshop
    Antworten: 3
    Letzter Beitrag: 29.10.08, 14:39
  3. textarea, mit onfocus&onblur wie bei input
    Von schlaflos im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 09.09.05, 09:34
  4. Text an Hintergrund anpassen
    Von Schiesti im Forum Photoshop
    Antworten: 11
    Letzter Beitrag: 19.03.05, 12:19
  5. JPG-Hintergrund an 2. JPG-Hintergrund anpassen
    Von Struwwel im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 28.04.04, 03:26