[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:
The Code I want to Select <a href="http://bekreatief.blogspot.ch"> A Link </a> <li>Starting a list...</li> <img src="http://fc09.deviantart.net/fs71/i/2012/270/8/4/a_cup_of_______by_mynimi94-d5g22dl.jpg" alt="Cupcake in a Cup" title="Cupcake in a Cup"/> Some more useless text... bli bla blubb ... ... ...

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. <textarea id="tobeselected">TEXT THAT IS GONNA BE SELECHTED</textarea> <br> <input onclick="document.getElementById('tobeselected').focus();document.getElementById('tobeselected').select()" type="button" value="select" />
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.

<textarea cols="132" rows="10" id="2" readonly> The Code I want to Select <a href="http://bekreatief.blogspot.ch"> A Link </a> <li>Starting a list...</li> <img src="http://fc09.deviantart.net/fs71/i/2012/270/8/4/a_cup_of_______by_mynimi94-d5g22dl.jpg" alt="Cupcake in a Cup" title="Cupcake in a Cup"/> Some more useless text... bli bla blubb ... ... ...</textarea><br> <input onclick="document.getElementById('2').focus();document.getElementById('2').select()" type="button" value="select" />
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.
<div class="three"><textarea cols="132" rows="10" id="3" readonly> The Code I want to Select <a href="http://bekreatief.blogspot.ch"> A Link </a> <li>Starting a list...</li> <img src="http://fc09.deviantart.net/fs71/i/2012/270/8/4/a_cup_of_______by_mynimi94-d5g22dl.jpg" alt="Cupcake in a Cup" title="Cupcake in a Cup"/> Some more useless text... bli bla blubb ... ... ...</textarea> <input onclick="document.getElementById('3').focus();document.getElementById('3').select()" type="button" value="select" /></div> <style> .three textarea{ width: 1000px !important; border: none; background-color: rgba(228, 227, 236, 0.5); color: rgba(126, 0, 43, 0.65); -webkit-border-radius: 5px; border-radius: 5px; -moz-border-radius:5px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; display: block; -webkit-box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, .2), inset 1px -1px 1px 0px rgba(0, 0, 0, .1); box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, .2), inset 1px -1px 1px 0px rgba(0, 0, 0, .1); } .three textarea:hover , .three teaxtarea:focus{ outline: none; background: #e4e3ec; color: #7e002b; -webkit-border-radius: 15px; border-radius: 15px; -moz-border-radius:15px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } </style>
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.
<input onclick="document.getElementById('4').focus();document.getElementById('4').select()" type="button" value="select" class="button" /> <style> .button{ border: none; width: 1000px; padding: 10px 0px; font-size: 15px; font-family; Arial; font-weight: bold; background-color: rgba(228, 227, 236, 0.45); color: rgba(126, 0, 43, 0.65); -webkit-box-shadow: inset 1px -1px 1px 0px rgba(0, 0, 0, .2), inset -1px 1px 1px 0px rgba(0, 0, 0, .1); box-shadow: inset 1px -1px 1px 0px rgba(0, 0, 0, .2), inset -1px 1px 1px 0px rgba(0, 0, 0, .1); } .button:hover{ background: #e4e3ec; color: #7e002b; } .button:active{ background: #e4e3ec; color: #7e002b; -webkit-box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, .2), inset 1px -1px 1px 0px rgba(0, 0, 0, .1); box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, .2), inset 1px -1px 1px 0px rgba(0, 0, 0, .1); } </style>
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! ^^