Inserire pulsante per grassetto in un modulo

**trippacchiello** · 14-01-2009, 15:39

Ho un modulo e vorrei poter inserire un pulsante che mi apra un applet dove inserire un testo il quale poi sarà compreso nei tag
Sapete dirmi se c'e' un esempio in giro?

In pratica attualmente sto inserendo io le news scrivendo nel campo di testo le parole che mi interessano in grassetto mettendo a mano i tag, vorrei pero' far mettere le news a mia sorella che non sa l'html e quindi vorrei poterle far cliccare su un pulsante che dice: scrivi la parola che vuoi in grassetto, preme invio e la parola si posiziona nel form con tanto di tag

Sapete aiutarmi?

**trippacchiello** · 14-01-2009, 21:59

nessuno sa aiutarmi?

**Straystudios** · 15-01-2009, 03:27

Quindi ci sarà una TEXTAREA, che JavaScript dovrà poter individuare; nell' esempio le assegno un ID e mi avvalgo di .getElementById("quale_id")

Sono tre i tipi di quelle finestrine JS di dialogo: alert, confirm, e, quello cui ti riferisci è il prompt.

var piece si traduce in quello che l' utente scrive nella barra del prompt; potresti anche usare var trippa. Nota che lo stesso termine è riportato in '+piece+' ed a occhio capisci come funzionano le cose.

La riga area.focus(); è un optional, se la togli lo SCRIPT funziona ancora; ma è molto utile perché ti fa ritrovare il lampeggio già pronto nella textarea senza doverci ri-cliccare.

Questo è solo per principio; domani potremmo rielaborare.

codice:

<html>
<head>
<script type="text/javascript">

function bold(){

 var piece = prompt('il testo inserito verrà reso in carattere \n\n\tGRASSETTO', '');

 var area = document.getElementById("field");
 area.value = area.value +' '+piece+' ';
 area.focus();
 }

</script>

</head>
<body bgcolor="#000000" text="#FFFFFF">

<h1>HTML</h1>
<div align="center">
                
 <input value="grassetto"    type="button" style="font-weight: bold;" onclick='bold();'>




 <textarea id="field" rows="26" cols="90"></textarea>

</div>
</body>
</html>

**trippacchiello** · 15-01-2009, 15:05

Originariamente inviato da Straystudios
Quindi ci sarà una TEXTAREA, che JavaScript dovrà poter individuare; nell' esempio le assegno un ID e mi avvalgo di .getElementById("quale_id")

Sono tre i tipi di quelle finestrine JS di dialogo: alert, confirm, e, quello cui ti riferisci è il prompt.

var piece si traduce in quello che l' utente scrive nella barra del prompt; potresti anche usare var trippa. Nota che lo stesso termine è riportato in '+piece+' ed a occhio capisci come funzionano le cose.

La riga area.focus(); è un optional, se la togli lo SCRIPT funziona ancora; ma è molto utile perché ti fa ritrovare il lampeggio già pronto nella textarea senza doverci ri-cliccare.

Questo è solo per principio; domani potremmo rielaborare.

codice:

<html>
<head>
<script type="text/javascript">

function bold(){

 var piece = prompt('il testo inserito verrà reso in carattere \n\n\tGRASSETTO', '');

 var area = document.getElementById("field");
 area.value = area.value +' '+piece+' ';
 area.focus();
 }

</script>

</head>
<body bgcolor="#000000" text="#FFFFFF">

<h1>HTML</h1>
<div align="center">
                
 <input value="grassetto"    type="button" style="font-weight: bold;" onclick='bold();'>




 <textarea id="field" rows="26" cols="90"></textarea>

</div>
</body>
</html>

grande, era quello che cercavo

io alla fine l'ho fatto, ma il tuo ha in piu' che quando clicchi ok per chiudere il promt esce anche il cursore lampeggiante dopo il testo immesso e quindi puoi continuare a scrivere senza dover riposizionare il corsore

**Straystudios** · 15-01-2009, 18:39

Avrai notato che se annulli l' operazione, ti ritrovi stampato <b>null</b> perché null è il rimando del prompt.
Per non averlo, ho condizionato la function con un if-statement che lascia intervenire sulla textarea solo se il rimando del prompt (piece) è diverso (!=) da null.

function bold(){

 var area = document.getElementById("field");
 var piece = prompt('il testo inserito verrà reso in carattere \n\n\tGRASSETTO', '');

   if(piece != null){
      area.value = area.value +' '+piece+' ';
   }

 area.focus();
 }

Si continua ad avere <b></b> se si fa l' invio senza contenuto; e questo si può lasciare, potrebbe far comodo.
Volendolo invece eliminare anch' esso, si estenderà la condizione:

   if(piece != null && piece != ""){

o semplicemente anche:

   if(piece){

if piece, cioè se esiste piece.
Testati entrambi IExplorer7, FFox2 e un Netscape di qualche anno fa.

**Straystudios** · 16-01-2009, 03:48

Fa aprire una pop-up il cui body-content è il testo inserito nella textarea, che di conseguenza risulta processato; adeguare all' ID dato all' elemento textarea, qui id="field", o ad altro criterio seguito nel tuo layout.
Ottimo per tener sotto controllo la scrittura dell' articolo/news.

Appare/scompare al richiamo di un medesimo pulsante:
<input value="pre-view" type="button" class="" onclick='preview();'>

codice:

<script type="text/javascript">

                           var prev =0;
function preview(){

 if(prev == 0){
    var win = window.open('', 'proc', 'top=0, scrollbars=yes, resizable=yes, menubar=yes, width=600, height=400');
    win.document.open();
    win.document.writeln('<html><head><title>Verifica formattazione</title>');
    win.document.writeln('</head><body style="margin: ; font-family: ;" '+
                         'onload=\\'document.body.innerHTML=""+window.opener.document.getElementById("field").value+"<pre></pre>";\\'> ');
    win.document.writeln('... Loading problem');
    win.document.writeln('</body></html>');
    win.document.close();
    win.focus();
    prev =1;
 } else {
   prev =0;
   document.getElementById("field").focus();
 }
};

</script>

Nothing is more evil than a pop-up !
Siccome in JS, niente è più diabolico di una pop-up, puoi lasciare questa function indipendente tra due tag script /script dimodoché un qualche errore in sede di modificazioni, non ti blocchi anche le altre funzioni.

Discussione: Inserire pulsante per grassetto in un modulo

Strumenti discussione

Ricerca discussione

Visualizza

Inserire pulsante per grassetto in un modulo

prompt ("", "");

Re: prompt ("", "");

OK / Cancel buttons with prompt('');

BODY content pre-view

Permessi di invio