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-in-den-spiegeln-teil-2-evelyn" title="In den Spiegeln - Teil 2 - Evelyn">
                <img class="lz" data-src="/covers/02/13/15/cover.jpg" alt="In den Spiegeln - Teil 2 - Evelyn" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-in-den-spiegeln-teil-2-evelyn" title="In den Spiegeln - Teil 2 - Evelyn">
                In den Spiegeln - Teil 2 - Evelyn Online Lesen
            </a>
                            von
                                    <a href="/autor-ales-pickar-online-lesen-downloaden-kostenlos" title="Ales Pickar">Ales Pickar</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-in-den-spiegeln-teil-2-evelyn" title="In den Spiegeln - Teil 2 - Evelyn">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-das-buch-der-schatten-2" title="Das Buch der Schatten 2">
                <img class="lz" data-src="/covers/12/18/cover.jpg" alt="Das Buch der Schatten 2" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-das-buch-der-schatten-2" title="Das Buch der Schatten 2">
                Das Buch der Schatten 2 Online Lesen
            </a>
                            von
                                    <a href="/autor-tiernan-cate-online-lesen-downloaden-kostenlos" title="Tiernan Cate">Tiernan Cate</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-das-buch-der-schatten-2" title="Das Buch der Schatten 2">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-selbs-betrug" title="Selbs Betrug">
                <img class="lz" data-src="/covers/03/16/45/cover.jpg" alt="Selbs Betrug" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-selbs-betrug" title="Selbs Betrug">
                Selbs Betrug Online Lesen
            </a>
                            von
                                    <a href="/autor-schlink-online-lesen-downloaden-kostenlos" title="Schlink">Schlink</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-selbs-betrug" title="Selbs Betrug">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-aristos-insel-der-entscheidung" title="Aristos - Insel der Entscheidung">
                <img class="lz" data-src="/covers/02/19/43/cover.jpg" alt="Aristos - Insel der Entscheidung" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-aristos-insel-der-entscheidung" title="Aristos - Insel der Entscheidung">
                Aristos - Insel der Entscheidung Online Lesen
            </a>
                            von
                                    <a href="/autor-michelle-reid-online-lesen-downloaden-kostenlos" title="Michelle Reid">Michelle Reid</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-aristos-insel-der-entscheidung" title="Aristos - Insel der Entscheidung">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-pr-2622-die-rebellen-von-escalian" title="PR 2622 – Die Rebellen von Escalian">
                <img class="lz" data-src="/covers/03/39/31/cover.jpg" alt="PR 2622 – Die Rebellen von Escalian" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-pr-2622-die-rebellen-von-escalian" title="PR 2622 – Die Rebellen von Escalian">
                PR 2622 – Die Rebellen von Escalian Online Lesen
            </a>
                            von
                                    <a href="/autor-uwe-anton-online-lesen-downloaden-kostenlos" title="Uwe Anton">Uwe Anton</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-pr-2622-die-rebellen-von-escalian" title="PR 2622 – Die Rebellen von Escalian">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-firkin-02-die-froesche-des-krieges" title="Firkin 02 - Die Frösche des Krieges">
                <img class="lz" data-src="/covers/03/03/03/cover.jpg" alt="Firkin 02 - Die Frösche des Krieges" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-firkin-02-die-froesche-des-krieges" title="Firkin 02 - Die Frösche des Krieges">
                Firkin 02 - Die Frösche des Krieges Online Lesen
            </a>
                            von
                                    <a href="/autor-harman-andrew-online-lesen-downloaden-kostenlos" title="Andrew Harman">Andrew Harman</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-firkin-02-die-froesche-des-krieges" title="Firkin 02 - Die Frösche des Krieges">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-freche-maedchen-08-rosen-chaos-hochzeitsparty" title="Freche Mädchen... 08: Rosen, Chaos, Hochzeitsparty">
                <img class="lz" data-src="/covers/95/76/cover.jpg" alt="Freche Mädchen... 08: Rosen, Chaos, Hochzeitsparty" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-freche-maedchen-08-rosen-chaos-hochzeitsparty" title="Freche Mädchen... 08: Rosen, Chaos, Hochzeitsparty">
                Freche Mädchen... 08: Rosen, Chaos, Hochzeitsparty Online Lesen
            </a>
                            von
                                    <a href="/autor-zimmermann-irene-online-lesen-downloaden-kostenlos" title="Irene Zimmermann">Irene Zimmermann</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-freche-maedchen-08-rosen-chaos-hochzeitsparty" title="Freche Mädchen... 08: Rosen, Chaos, Hochzeitsparty">
                    <img src="/i/de/rlesen.png" />
                </a>
            </div>
                    </div>
    </div>
    <div class="itm itma">
                    <a href="/kostenlose-necropolis" title="Necropolis">
                <img class="lz" data-src="/covers/34/28/cover.jpg" alt="Necropolis" />
            </a>
                <div class="itm-info">
            <a href="/kostenlose-necropolis" title="Necropolis">
                Necropolis Online Lesen
            </a>
                            von
                                    <a href="/autor-anthony-horowitz-online-lesen-downloaden-kostenlos" title="Anthony Horowitz">Anthony Horowitz</a>
                                                                        <div class="rkl-b">
                <a href="/kostenlose-necropolis" title="Necropolis">
                    <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>