Wie erstellt man mit jQuery ein "twitter like" verbleibendes Zeichen?

7

Ich möchte die "Meta Description" - und "title" -Tag-Eingabefelder meines WordPress-Themas erweitern und möchte ein Text-Snippet hinzufügen, das das Texteingabefeld nach jedem Tastendruck auswertet und die Felder "target character count" aktualisiert "Genau wie Twitter tut.

Im Feld "Meta Description" lautet die Zielzeichenanzahl beispielsweise 160. Wenn das Feld leer ist, lautet die Zahl beispielsweise 160. Wenn der Benutzer eingibt, wird die Anzahl der Zeichen verringert, wenn jedes Zeichen zu der Zahl hinzugefügt wird Eingabefeld bis es Null erreicht.

Wenn die Anzahl höher als das Ziel ist, werden die Zahlen in rot mit einem Minuszeichen vorne geschrieben (wiederum wie Twitter).

Gibt es dafür ein vorhandenes jQuery-Skript?

%Vor%     
RegEdit 28.10.2011, 20:16
quelle

6 Antworten

15

Nicht, dass ich davon wüsste, aber hier ist etwas, womit Sie anfangen können: Ссылка

Edit: Andy E hat Recht - ich hätte (und habe jetzt) ​​Unterstützung mit dem input -Ereignis, das funktioniert, wenn Sie eine Taste gedrückt halten, einfügen, ziehen usw. in Browsern, die es unterstützen. Ссылка

    
Ry︁ 28.10.2011, 20:25
quelle
6

Es ist nichts zu kompliziert:

JS :

%Vor%

HTML:

%Vor%

CSS:

%Vor%

Demo: Ссылка

Grundsätzlich behandeln Sie jedes Ereignis im Textbereich und prüfen, ob die Länge größer / kleiner als ein Schwellenwert ist.

    
Blender 28.10.2011 20:29
quelle
0

werfen Sie einen Blick auf diese Liste von Plugins:

Ссылка

    
swatkins 28.10.2011 20:20
quelle
0

Überprüfen Sie: Ссылка

%Vor%     
Marco Johannesen 28.10.2011 20:28
quelle
0

Sie können es so machen (siehe dieses Spiel für einen Beweis):

  • HTML:

    %Vor%

  • JavaScript:

    %Vor%
Tadeck 28.10.2011 20:31
quelle
0

Binden Sie eine Funktion an die Änderung der Eingabe, überprüfen Sie die Länge des Textes, führen Sie die Subtraktion durch, und aktualisieren Sie ein div damit.

HTML

%Vor%

jQuery

%Vor%     
Whetstone 28.10.2011 20:20
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ist es möglich, Coffeescript-Code in Script-Tags in HTML-Dateien zu kompilieren? [Duplikat]