Ben's Hobbyhoekje -- Alles Selecteren knop bij een tekstvak

"Alles selecteren-knop" bij een tekstvak

Van veel websites kun je tekst af halen, bijvoorbeeld HTML- of JavaScript code. De tekst staat dan in een tekstvak. Om het naar je eigen code te kopiëren moet je dan de inhoud van dat tekstvak selecteren en vervolgens met Control+C op het clipboard zetten. Vervolgens plak je het met Control+V in je code.
Het gaat hier om het selecteren van de tekst in het tekstvak. Dat kun je natuurlijk met de muis doen, maar je kunt het ook aan JavaScript uitbesteden. Hier staat beschreven hoe je dat kunt aanpakken.

Overigens: op deze website wordt deze techniek niet gebruikt. Hier wordt code beschikbaar gesteld via downloads.

De code code staat onderaan deze bladzijde. Je kunt hem ook downloaden om zelf te gebruiken.

De code bestaat uit twee delen: Een formulier met bijbehorende button in de BODY en een klein stukje JavaScript in de HEAD.
Het JavaScript hoeft niet te worden aangepast. Van de HTML-code moet je de aanroep van de function SelecteerAlles() en de inhoud van het tekstvak aanpassen.
In de aanroep van SelecteerAlles() moet de referentie aan het tekstvak correct zijn, anders werkt het niet. Dat betekent dat de name van het formulier en van het tekstvak moeten worden opgegeven, in het format formulier.tekstvak. Zie ook de voorbeeld-code onderaan de pagina.
Natuurlijk kun je ook de grootte van het tekstvak veranderen.
In de code worden zowel name als id gebruikt. Ze hebben dezelfde waarde. Dit is gedaan omdat dit bij sommige browsers niet werkt met name, maar wel met id.
Overigens: het attribuut name was in de HTML 4-standaard deprecated (afgeraden), maar dat is teruggedraaid in de standaard van HTML5.
Hieronder staat een uitgewerkt voorbeeld. Selecteer de tekst door op de button te drukken. Kopiër de geselecteerde tekst naar het clipboard met behulp van Control+C. Open vervolgens een tekstverwerkingsprogramma (Kladblok is prima), en plak de tekst er in met Control+V.

Hier staat wat tekst. Hier staat nog meer tekst. En dit is ook tekst.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<script>
function SelecteerAlles(Veld) {
var my_val=eval("document."+Veld);
my_val.focus();
my_val.select();
}
</script>

(Zet dit in de <BODY>).

<form name="demo">
<button name="Selecteer" id="Selecteer" value="Alles selecteren" type="button" onClick="JavaScript:SelecteerAlles('demo.tekstvak1')">Alles selecteren</button><br>
<textarea cols="35" rows="10" name="tekstvak1" id="tekstvak1">Hier staat wat tekst.
Hier staat nog meer tekst.
En dit is ook tekst.
</textarea>
</form>

Downloaden:

Druk op de knop: File: voorb123.zip, 534 bytes.

Opmerking:

In browsers die draaien op Android, in combinatie met een aanraakscherm en een schermtoetsenbord, kan het gebeuren dat de opmaak van de pagina wordt verstoord als je op de knop "Alles selecteren" tikt. Dat gebeurt als de pagina in een <frame> of <iframe> staat. Met de muis gaat het altijd goed.

Deze methode is niet geschikt om tekst buiten een tekstvak te selecteren. Dat kan alleen door te slepen met de muis of door Control+A in te typen.
Zie ook het item "Selecteren van inhoud op een bladzijde verbieden".