Come creare pulsanti "Seleziona Tutto, Copia nella Clipboard e Cancella Tutto"?

[darkwolf]

Come da oggetto, considerando che ho una textarea, vorrei metterci su dei pulsanti "Seleziona Tutto, Copia nella Clipboard e Cancella Tutto" (e magari anche uno per scaricare il contenuto - che è salvato in una tabella del database - in un file di testo e/o un archivio zip di backup), ma non ne so molto di (java)script e quindi chiedo qui almeno qualche spunto (non ho fretta, mi serve solo per implementare queste funzioni in "My Custom CSS", un mio plugin per wordpress).

<textarea name="my_custom_css" id="my_custom_css" dir="ltr">
<?php echo get_option('my_custom_css'); ?>
</textarea>

Grazie anticipatamente per ogni eventuale consiglio,
DarkWolf

Io ti rispondo per quanto riguarda il tasto cancella;

potresti usare il tag <button>

<button type="reset" name="reset">CANCELLA</button>

[dreadnaut]

Per la selezione, dovrebbe esserci il medoto .select(), vedi http://stackoverflow.com/questions/7...xt-in-textarea

Per scaricare, puoi redirezionare ad un URI data:text-plain con il testo che vuoi, o simili soluzioni, vedi http://stackoverflow.com/questions/6...text-plain-url

Per copiare negli appunti, l'ultima volta che avevo controllato era possibile solo via flash, ma magari qualcosa è apparso.

[darkwolf]

@australiafever: E qui ci siamo, grazie, ma magari meglio con un alert/confirm, giusto per evitare che si prema per errore e si perda l'intero contenuto
-
@dread: grazie, mo do un'occhiata :)

[karl94]

Anzitutto pigli l'oggetto DOM che rappresenta il tuo campo, per esempio con un bel document.getElementById, per selezionare il contenuto invochi sull'oggetto così ottenuto il metodo select (non pretende alcun parametro), puoi invece accedere al contenuto (sia ottenerlo che impostarlo) mediante la proprietà value. Per quanto riguarda la copia negli appunti di sistema la questione è decisamente più complicata, difatti i maggiori browser hanno disabilitato per ragioni di sicurezza quei metodi che si usavano per quest'operazione ai tempi della guerra tra i browser Internet Explorer e Netscape. Attualmente le soluzioni consistono nell'ausilio da parte di un plugin esterno (Flash Player o Java) che permette di effettuare l'operazione, dovresti riuscire a trovare senza difficoltà una delle innumerevoli librerie che ti semplificano il tutto.

Argh, decisamente troppo lento a scrivere...

Comunque la proposta di Australiaferver è applicabile solo nel caso in cui ci sia solo questo elemento nel modulo, d'altro canto però funziona anche senza il supporto a Javascript.

[darkwolf]

Javascript è comunque "richiesto" dato che il plugin usa "Syntax" di CodeMirror (senza javascript funziona comunque, ma senza colorazione e senza niente di che... solo una textarea e una scrollbar e poi lavora all'interno dell'area admin di wordpress e quindi il javascript non è un problema)
-
Edit: dal debug di firebug notavo adesso che syntax disabilita la textarea e avvia un div (una serie di div a cascata) che rigenera totalmente la struttura e quindi la cosa mi si complica un po' :/

-

Allora, parto per ordine (sennò non parto mai)... aggiungere e rimuovere il conta-righe (questo ha a che fare col div, quindi non c'è il problema della textarea / vs il div)!

Quindi mi serve una checkbox che mi cambi quel "linenumbers: true" in false ad ogni click (mantenendo nel browser dell'utente la scelta fatta (ma credo lo faccia già da se).
-
Potenziale checkbox:

<input type="checkbox" name="linenumbers" onclick="(???)">

-
Attuale javascript (mando a capo per ottimizzare la lettura):

<script language="javascript">
var editor = 
CodeMirror.fromTextArea(document.getElementById("my_custom_css"), { lineNumbers: true });
</script>