Zur Navigation

vordefinieerter Text in Input-Feldern [2]

11 Jörg Kruse

Dann braucht es doch eine init Funktion.

Ich empfehle hier den Einsatz von jquery, sonst wirds es unnötig kompliziert mit dem Testen von veralteten Browsern, wobei in diesem Fall auch der IE8 schon als veraltet gelten muss.

05.12.2013 11:59

12 AndiN

Alles klar, dann schaue ich mir ein entsprechendes jQuery-Script mal an. Danke!

05.12.2013 12:14

13 Jörg Kruse

Wenn du kein passendes Script findest, kann man das vorhandene auch leicht erweitern, wenn die jquery Bibliothek eingebunden ist.

05.12.2013 12:27

14 AndiN

Mir ist gerade bewusst geworden, dass ich in der Ausgabe auf der Website ein Lightbox-Script einsetze welches ja jQuery benutzt! In der Ausgabe ist es also eingebunden. Im CMS noch nicht, aber das ist ja dann kein großer Akt.

Im Frontend sind folgende Dateien eingebunden:

<script src="/scripts/js/jquery-1.7.2.min.js"></script>
<script src="/scripts/js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="/scripts/js/jquery.smooth-scroll.min.js"></script>

Ist es unter Benutzung dieser o.g. Scripte einfacher den gewünschten Effekt durch Modifikation des o.g. Scripts hinzubekommen?

05.12.2013 13:10

15 Jörg Kruse

Ja, die jquery.min.js reicht schon

<script type="text/javascript">
function toggleValue(id, e) {
    var text = 'Tragen Sie eine Überschrift ein.';
    if (e == 'blur' && $('#' + id).val() == '') {
        $('#' + id).val(text);
        $('#' + id).css('color', '#aaa');
    } else if (e == 'focus' && $('#' + id).val() == text) {
        $('#' + id).val('');
        $('#' + id).css('color', '#000');
    }
}
$(document).ready(function() {
    $('.xyz').each(function() {
        toggleValue(this.id, 'blur');
    });
    $('.xyz').focus(function() {
        toggleValue(this.id, 'focus');
    });
    $('.xyz').blur(function() {
        toggleValue(this.id, 'blur');
    });
});
</script>

onfocus und onblur werden im HTML-Teil nicht mehr benötigt, auch das "color:#aaa" kann raus - wichtig ist aber die Klasse 'xyz' (kannst du natürlich auch anders benamsen):

<input
type="text"
name="headline<?php echo $multi_array[$a][0]; ?>"
id="headline<?php echo $multi_array[$a][0]; ?>"
style="width:528px;font-style:italic;"
class="text xyz"
value="<?php echo $multi_array[$a][1]; ?>"
>

05.12.2013 16:28

16 AndiN

Super!
War noch ein kleiner Bug drin (vordefinierter Text solte kursiv sein, nicht der reingeschriebene), aber das konnte ich selbst korrigieren. Auffällig - aber nicht schlimm - ist, dass wenn ich die Seite öffne alles prima aussieht, wenn ich dann jedoch F5 drücke ist der vordefinierte Text wieder schwarz und nicht kursiv. Kannst du mir sagen an was das liegt?

06.12.2013 10:33

17 Jörg Kruse

Das ist wohl eine Eigenheit von Firefox - Chrome und Opera zeigen dieses Verhalten nicht. Anscheinend befüllt bei einem F5 die Autocomplete-Funktion von Firefox die Eingabefelder mit Werten aus dem Cache. Wenn diese abgeschaltet wird, verhält sich Firefox wie die anderen Browser:

<input ... autocomplete="off">

Allerdings ist nicht ausgeschlossen, dass Firefox User diese Funktionalität dann vermissen.

06.12.2013 11:16

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]