JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

den Vorteil der jQuery-Verkettungen. Findet
$this.next()
nichts, bricht die Kette ab – sie kann kein
.focus()
aufrufen, wenn sie nichts findet. In einem anderen Szenario kann es sinnvoll sein, alle bekannten
.prev()
- und
.next()
-Elemente zu puffern.
    Was geschieht, wenn JavaScript abgeschaltet ist? Nichts. Der Anwender muss dann manuell ins nächste Feld springen, um mit der Eingabe fortzufahren.

Anzahl der verbleibenden Zeichen anzeigen
    Problem
    Ihre Firma hat auf ihrer Website eine Kontaktform. In dieser Form gibt es ein

Verbleibende Zeichen: 300

Lösung
Sprechen Sie alle
.remaining
-Elemente an und suchen sie das zugehörige

<br />-Element und die maximale Zeichenzahl aus dem Kind-Element<br />.count<br />heraus. Binden Sie an das<br /><textarea><br />eine<br />update<br />-Funktion, um benachrichtigt zu werden, wenn der Anwender Text eingibt:<br />// für jedes Element der Art "Verbleibende Zeichen: ###"<br />$('.remaining').each(function(){<br /><br />    // Maximalzahl und Eingabefeld finden und sichern<br />    var $count = $('.count',this);<br />    var $input = $(this).prev();<br /><br />    // .text() gibt einen Text zurück. Multipliziert mit 1 wird es eine Zahl (für math)<br />    var maximumCount = $count.text()*1;<br /><br />    // update-Funktion wird für die Events keyup, paste und input aufgerufen<br />    var update = function(){<br /><br />     var before = $count.text()*1;<br />     var now = maximumCount - $input.val().length;<br /><br />     // Prüfen, ob der Anwender die Grenze schon überschritten hat<br />     if ( now < 0 ){<br />     var str = $input.val();<br />     $input.val( str.substr(0,maximumCount) );<br />     now = 0;<br />     }<br /><br />     // DOM nur bei Bedarf aktualisieren<br />     if ( before != now ){<br />     $count.text( now );<br />     }<br />    };<br /><br />    // Auf Änderungen lauschen (siehe Diskussion)<br />    $input.bind('input keyup paste', function(){setTimeout(update,0)} );<br /><br />    // update direkt aufrufen, falls Eingabefeld schon befüllt ist<br />    update();<br /><br />}); // Ende von .each()<br />    Diskussion<br />    Der vorgestellte Code ist generisch genug, um eine beliebige Zahl von »Verbleibende Zeichen«-Ausgaben und<br /><textarea><br />-Elementen auf einer Seite betreuen zu können. Das kann nützlich sein, wenn Sie ein CMS oder eine Dateneingabemaske haben.<br />    Um auch das Kopieren oder Einfügen von Daten in das<br /><textarea><br />per Maus zu berücksichtigen, müssen wir die Events<br />input<br />und<br />paste<br />berücksichtigen. Das Event<br />mouseup<br />kann nicht verwendet werden, weil es nicht ausgelöst wird, wenn man einen Eintrag aus dem Kontextmenü des Browsers wählt. Das Event<br />input<br />ist Teil von HTML5 (Working Draft) und schon durch Firefox, Opera und Safari implementiert. Es wird bei einer Benutzereingabe ausgelöst – unabhängig vom verwendeten Eingabegeräte (Maus oder Tastatur). Safari hat zum Zeitpunkt der Entstehung dieses Buches einen Bug, durch den das<br />input<br />-Event bei<br /><textarea><br />-Elementen nicht ausgelöst wird. Sowohl Safari als auch der Internet Explorer kennen das Event<br />paste<br />für<br /><textarea><br />-Elemente und<br />keyup<br />, um Tastenaktionen abzufangen. Bindet man<br />keyup<br />,<br />input<br />und<br />paste<br />, ist das zwar redundant, aber in diesem Fall hilfreich. Die Funktion<br />update<br />ist so einfach, dass sie keine Performance-Probleme hervorruft, und sie passt das DOM nur dann an, wenn es notwendig ist. Es gibt also keinen Ärger durch Redundante Aufrufe von<br />update<br />.<br />    Eine Alternative zu redundanten Events wäre das Verwenden von<br />setInterval<br />, solange das<br /><textarea><br />-Element den Fokus besitzt. Die gleiche Funktion<br />update<br />könnte in regelmäßigen Zeitabständen aufgerufen werden. Kombiniert mit dem Event<br />keyup<br />würden Sie beim Tippen eine direkte Reaktion erhalten und mit einem passenden Aktualisierungs-Intervall – vielleicht so 300 Millisekunden – würde auch nach einem Einfügen eine Reaktion erfolgen. Ist die<br />update<br />-Funktion komplexer oder teurer, dann kann das der bessere Weg sein.<br />    Bindet man Events an Form-Elemente, ist es manchmal wichtig, einen Timeout zu nutzen, um einen Funktionsaufruf ein bisschen zu verzögern. Im vorherigen Beispiel löst der Internet Explorer das<br />paste<br />-Event aus, bevor der Text aus der Zwischenablage tatsächlich im<br /><textarea><br />-Element eingefügt wird. Dadurch würde die Berechnung der verbleibenden Zeichen falsch sein, bis
            </div>

</div>

<div class="otr">
            <h2>Weitere Kostenlose Bücher</h2>
            <div class="itm itma">
                    <a href="/kostenlose-camel-club-01-die-waechter" title="Camel Club 01 - Die Wächter">
                <img class="lz" data-src="/i/de/debookcover.png" alt="Camel Club 01 - Die Wächter" />
            </a>
                            <div class="itm-info">
            <a href="/kostenlose-camel-club-01-die-waechter" title="Camel Club 01 - Die Wächter">
                Camel Club 01 - Die Wächter Online Lesen
            </a>
                            von
                                    <a href="/autor-baldacci-david-online-lesen-downloaden-kostenlos" title="David Baldacci">David Baldacci</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-camel-club-01-die-waechter" title="Camel Club 01 - Die Wächter">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-dein-gesicht-morgen-fieber-und-lanze" title="Dein Gesicht morgen / Fieber und Lanze">
                <img class="lz" data-src="/covers/18/41/cover.jpg" alt="Dein Gesicht morgen / Fieber und Lanze" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-dein-gesicht-morgen-fieber-und-lanze" title="Dein Gesicht morgen / Fieber und Lanze">
                Dein Gesicht morgen / Fieber und Lanze Online Lesen
            </a>
                            von
                                    <a href="/autor-marias-javier-online-lesen-downloaden-kostenlos" title="Javier Marías">Javier Marías</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-dein-gesicht-morgen-fieber-und-lanze" title="Dein Gesicht morgen / Fieber und Lanze">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-todesflut-thriller" title="Todesflut: Thriller">
                <img class="lz" data-src="/covers/03/33/87/cover.png" alt="Todesflut: Thriller" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-todesflut-thriller" title="Todesflut: Thriller">
                Todesflut: Thriller Online Lesen
            </a>
                            von
                                    <a href="/autor-boyd-morrison-online-lesen-downloaden-kostenlos" title="Boyd Morrison">Boyd Morrison</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-todesflut-thriller" title="Todesflut: Thriller">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-meconomy" title="Meconomy">
                <img class="lz" data-src="/i/de/debookcover.png" alt="Meconomy" />
            </a>
                            <div class="itm-info">
            <a href="/kostenlose-meconomy" title="Meconomy">
                Meconomy Online Lesen
            </a>
                            von
                                    <a href="/autor-markus-albers-online-lesen-downloaden-kostenlos" title="Markus Albers">Markus Albers</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-meconomy" title="Meconomy">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-bevor-der-abend-kommt" title="Bevor der Abend kommt">
                <img class="lz" data-src="/i/de/debookcover.png" alt="Bevor der Abend kommt" />
            </a>
                            <div class="itm-info">
            <a href="/kostenlose-bevor-der-abend-kommt" title="Bevor der Abend kommt">
                Bevor der Abend kommt Online Lesen
            </a>
                            von
                                    <a href="/autor-joy-fielding-online-lesen-downloaden-kostenlos" title="Joy Fielding">Joy Fielding</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-bevor-der-abend-kommt" title="Bevor der Abend kommt">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-angelique-hochzeit-wider-willen" title="Angélique - Hochzeit wider Willen">
                <img class="lz" data-src="/i/de/debookcover.png" alt="Angélique - Hochzeit wider Willen" />
            </a>
                            <div class="itm-info">
            <a href="/kostenlose-angelique-hochzeit-wider-willen" title="Angélique - Hochzeit wider Willen">
                Angélique - Hochzeit wider Willen Online Lesen
            </a>
                            von
                                    <a href="/autor-golon-a-online-lesen-downloaden-kostenlos" title="A Golon">A Golon</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-angelique-hochzeit-wider-willen" title="Angélique - Hochzeit wider Willen">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-microsoft-word-atlan-024-das-seuchenschiffrtf" title="Microsoft Word - Atlan 024 - Das Seuchenschiff.rtf">
                <img class="lz" data-src="/i/de/debookcover.png" alt="Microsoft Word - Atlan 024 - Das Seuchenschiff.rtf" />
            </a>
                            <div class="itm-info">
            <a href="/kostenlose-microsoft-word-atlan-024-das-seuchenschiffrtf" title="Microsoft Word - Atlan 024 - Das Seuchenschiff.rtf">
                Microsoft Word - Atlan 024 - Das Seuchenschiff.rtf Online Lesen
            </a>
                            von
                                    <a href="/autor-dieterlederhosen-online-lesen-downloaden-kostenlos" title="DieterLederhosen">DieterLederhosen</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-microsoft-word-atlan-024-das-seuchenschiffrtf" title="Microsoft Word - Atlan 024 - Das Seuchenschiff.rtf">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-toedliche-gier" title="Tödliche Gier">
                <img class="lz" data-src="/covers/15/12/cover.jpg" alt="Tödliche Gier" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-toedliche-gier" title="Tödliche Gier">
                Tödliche Gier Online Lesen
            </a>
                            von
                                    <a href="/autor-grafton-sue-online-lesen-downloaden-kostenlos" title="Sue Grafton">Sue Grafton</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-toedliche-gier" title="Tödliche Gier">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
        </div>
            </div>

<footer>
            <div class="inn">
                <div class="lf">
                    © Kostenlos Online Lesen                    2024                    support@kostenlosonlinelesen.net                </div>
                <div class="rg">
                    
                    <span id="wts1866490"> </span><script>
                        var wts=document.createElement('script');wts.type='text/javascript';
                        wts.async=true;wts.src='https://wts.one/3/1866490/log6_2.js';
                        document.getElementById('wts1866490').appendChild(wts);
                    </script><noscript><a href="https://www.web-stat.com">
                            <img src="https://wts.one/6/3/1866490.gif"
                                 alt="Web-Stat traffic analytics"></a></noscript>

<script type="text/javascript" >
                        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
                            m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
                        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

ym(53412301, "init", {
                            clickmap:true,
                            trackLinks:true,
                            accurateTrackBounce:true,
                            webvisor:true
                        });
                    </script>
                    <noscript><div><img src="https://mc.yandex.ru/watch/53412301" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
                    
                </div>
            </div>
        </footer>