Be KreaTief

[HTML] Select All Button für Code ✤

Halli Hallo Leute :)
So, heute ein CSS, HTML-Gemixe was eigentlich nur die Aufgabe hat Leuten die Tutorials folgen das Leben zu erleichtern.
Ich weiss ja nicht, wie es euch geht, aber ich freu mich immer total, wenn Tutorialseiten etc. ihren Lesern die Möglichkeit geben den Code auf einmal zu selektieren, damit man ihn schneller kopieren kann, um ihn in den Editor zu packen und damit rumzuspielen.
Das werden wir heute tun.
Weil ich hier den ganzen CSS-Teil allgemein formatiert habe, kann ich das leider nicht so gut zeigen, darum habe ich auch hier ein DEMO in dem ihr die einzelnen Schritte sehen könnt.
Das ganze resultiert in folgendem Ergebnis:


Okay, wie machen wir das? (am besten Demo in zweitem Fenster öffnen. Ich weiss, nicht optimal, aber ich habe keine Ahnung, wie da alles zurücksetzbar werden soll, ohne dass ich den Code ändern muss, und das nervt mich dann bisschen, darum muss das jetzt irgendwie gehen.

Gut, genug gejammert, legen wir los. Das ganze liegt in einer textarea, ihr könnt gleich ausprobieren, unter Step 1 könnt ihr problemlos selbst reinschreiben, text editieren etc. Das erste was wir tun ist folgendes.
Okay, was genau steht da oben?
Als erstes brauchen wir eine textarea, dieser geben wir eine id, das ist das wichtigste dabei. Unter die Textarea fügen wir einen Button ein. Dieser Button ist ein Input, welcher den Inhalt der Textarea mit der ID die wir unserer Area gegeben haben in den Fokus nimmt und dann selektiert, sobald man auf den Button klickt.
Aufgabe erfüllt :D
Jetzt muss es nur noch gut aussehen.


In diesem Schritt erweitern wir den textarea-Code. Vor allem um das Attribut readonly was bedeutet, dass der Leser den Text nicht editieren kann. Versucht es, reinschreiben geht nicht mehr. Gleichzeitig definieren wir durch Anzahl Zeichen pro Zeile (cols) und anzahl angezeigten Zeilen (rows) die Grösse der Area.

So, das war's im HTML-Teil. Jetzt soll unser Bereich nur nicht mehr wie eine textarea aussehen. Ich habe das ganze in einen div-Container gepackt, um die CSS von den anderen isoliert zu gestalten, ihr könnt aber auch einfach eine
textarea { }-CSS definieren. Das ist dann allgemeingültig. Nicht nur für den Container.

Ich muss die CSS glaub ich nicht mehr erklären, so oft wie ich nun schon über das ganze Zeug geredet habe... tauchen dennoch Fragen auf, einfach einen Kommentar hinterlassen, ich antworte.


Durch die Gestaltung der Textarea sind wir nun schon beim letzten Schritt angekommen.
Der Gestaltung des Buttons. Ich mag ihn so nicht, also wird er geändert. Dazu fügen wir den Input noch eine Klasse hinzu und definieren diese in der CSS.

Und dat wars. :D

Wie findet ihr die neue Kopiermöglichkeit? Gut? Soll ich sie beibehalten, oder lieber die Anzeige mit Code? Ich finde es extrem praktisch (darum auch der Post) aber ich hätt gern gewusst, was eure Meinung dazu ist.
Schreibt nen Kommentar! ^^
edit

1 comment:

  1. Ich hab mal eine Frage zu deinem aktuellen Design :
    Deine Navigationsleiste läuft oben ja soft aus und der Scrollbereich (Hauptseite) läuft nach oben dort hinein. Wie hast du das gemacht? (so ganz grob :D ) Wir machen demnächst in Info ein Projekt und ich wollte eine Seite so ähnlich gestalten, also eben mit so, dass die Seite nach oben hin in die Leiste reinläuft. Ich hoffe du kannst mir helfen! (:
    wonderphotography.blogspot.com

    ReplyDelete

Fragen, Feedback oder anderes, was du loswerden willst?
Kommentiere über das alte Kommentarsystem (check wieder vorbei um zu sehen, ob ich geantwortet habe) oder G+

Questiosn, Feedback or something else you want to tell me?
Comment using the old system or G+ and make sure to check back to see if I answered