Leere Input Felder farbig markieren

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Leere Input Felder farbig markieren

    Ich möchte in meinem Formular alle Felder, die leer sind mit der Farbe grau füllen. Ich habe es auch geschafft etwas zu coden, jedoch geschieht dies nur wenn das input Feld aktiviert wird. Ich möchte jedoch das das Feld auch grau ist, wenn es nicht aktiviert ist. Also beim Seitenaufruf. Geht wohl mit onload="FUNKTION" im Body Tag. Ich weiß aber nicht wie der JS Teil lauten soll. Mein Beispiel ist auch nur für ein iput Feld gedacht. Also müsste ich den JS Code jedem Input Feld zufügen. Aber es muss doch gehen, dass man im Head sagt, alle leeren input Felder sollen grau sein.

    Hier mein bisheriger Versuch:

    Quellcode

    1. <html>
    2. <head>
    3. </head>
    4. <body>
    5. <form name="myform">
    6. <input name="change" onfocus="if (this.value == '') this.style.backgroundColor='#ddd';">
    7. </form>
    8. </body>
    9. </html>

  • Ich habe es nun soweit:

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript">
    4. function pageBackground(bkgColor) {
    5. if (document.myform.change1.value == '') {
    6. document.myform.change1.style.backgroundColor=bkgColor;
    7. }
    8. if (document.myform.change2.value == '') {
    9. document.myform.change2.style.backgroundColor=bkgColor
    10. }
    11. if (document.myform.change3.value == '') {
    12. document.myform.change3.style.backgroundColor=bkgColor
    13. }
    14. }
    15. </script>
    16. </head>
    17. <body onload="pageBackground('#ccc')">
    18. <form name="myform" action="1.html" >
    19. <input name="change1">
    20. <input name="change2">
    21. <input name="change3">
    22. <input type="submit">
    23. </form>
    24. </body>
    25. </html>
    Alles anzeigen


    Jedoch klappen die IF Anweisungen nicht.

  • Du benutzt aber die onLoad Funktion, die wird nur ausgeführt wenn die Seite geladen wird.

    was du brauchst ist die onChange Funktion der Textbox.

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript">
    4. function pageBackground() {
    5. if (document.getElementById('box1').value == "") {
    6. document.getElementById('box1').style.backgroundColor="#ccc";
    7. }else{
    8. document.getElementById('box1').style.backgroundColor="#fff";
    9. }
    10. }
    11. </script>
    12. </head>
    13. <body onLoad="pageBackground();">
    14. <form name="myform" action="1.html">
    15. <input name="change1" id="box1" onChange="pageBackground();">
    16. <input type="submit">
    17. </form>
    18. </body>
    19. </html>
    Alles anzeigen


    Dann wird der Javascript Code nach dem Verlassen der Textbox aktualisiert. Wenn du es schon BEIM tippen aktualisiert haben willst, nutze die Keypress oder Keydown events.

    und auf 3 Textfelder kannst du selber erweitern, Übung machts :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Koljan777 ()