visuelleGedanken.de

Automatisches Selektieren eines Textsnippets

Dass es bald eine read-only API für QUOTE.fm geben wird ist ein offenes Geheimnis und daher baue ich gerade den Labs-Bereich in dem die API erklärt wird, man eigene Apps anlegen kann und später auch diverse Snippets für die eigene Webseite findet.

Wer zum Beispiel schon mal mit der Twitter API gearbeitet hat, weiß, dass man für jede App, die man anlegt diverse geheime Codes bekommt, die man dann kopieren und irgendwo in den eigenen Code einfügen muss. Teilweise beinhalten dieses Codes so seltsame Zeichen, dass ein schnelles Markieren per Doppelklick nicht möglich ist. Natürlich kann man den Text dann auch ganz normal markieren und kopieren. Oft nervt das aber und hält unnötig auf.

Es gibt eine – wahrscheinlich auch noch tausend andere – Möglichkeit, das schneller und einfacher zu machen. Deswegen wird man in der QUOTE.fm API einfach irgendwo in den Code klicken können und hat automatisch die komplette Zeile markiert und kann sie kopieren. Nur ein Detail, was die Arbeit aber etwas angenehmer macht, da man sowieso immer den kompletten Schlüssel braucht.

Die Lösung dafür ist ganz simpel. Statt irgendeines anderen Containers nehmen wir für den Code einfach ein input-Feld, setzen es auf readonly und stylen es als wäre es normaler Text.

<input class="key select" type="text" value="bYRlJaCBHJaksjdhaAS)(§Uk8o6IfbQMemhW7TOQ" readonly />

Das dazugehörige CSS:

.key {
    width: 100%;
    color: #3c3c3c;
    font-family: 'Monaco','Courier',monospace;
    font-size: 15px;
    line-height: 15px;
    border: 1px solid bold;
    font-style: italic;
}

Soweit sind wir optisch fertig. Jetzt brauchen wir nur noch einen jQuery Schnipsel und fertig sind wir. Und jQuery einbinden nicht vergessen.

$('.select').click(function(){
    $(this).select();
});

Wenn wir also irgendwo auf der Webseite einen Text automatisch ausgewählt haben wollen, können wir einfach die Klasse .select vergeben und brauchen uns nicht weiter um irgendwas kümmern.
In diesem Fall hätte ich mir eine der beiden Klassen sparen können, in einem größeren Projekt ergibt die Aufteilung aber durchaus Sinn. Viel Spaß damit!

Den Trick verwendet dribbble übrigens auch auf den Einzelseiten für die Permalink urls.

Update: Habe es auch mal kurz bei jsfiddle gebaut, damit ihr es testen könnt.