Rendere l'infografica facilmente condivisibile

[piovonotorte]

Ciao a tutti ragazzi
vorrei un aiutino per rendere l'infografica facilmente condivisibile.

Sono riuscito a mettere l'infografica sul sito e grazie ad "embeded Code Generator" sono riuscito a mettere al di sotto dell'infografica un text area con il codice <p> </p> dell'infografica.

Ho pensato di rendere la procedura di copia ancora più facile ed ho trovato questo codice su w3school

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

ho pensato di andare a sostituire al posto di Hello World il codice <p> </p> di embeded Code Generator quindi ottengo

value ="<p> </p>" id="myInput">

ma mi esce nella metà pagina di prova del sito w3schol , nella parte dove si testa il codice, il campo con il paragrafo <p> </p> di embed code generator
ma affiacato da " id="myInput">

cioè c'è questa id="myInput" che non dovrebbe comparire .

https://ibb.co/crmYNL4

come posso risolvere?

[alemoppo]

Devi utilizzare le entità html:

<input type="text" value="&lt;p&gt;testo paragrafo&lt;/p&gt" id="myInput">
<button onclick="myFunction()">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Ciao!

[GraphOGLRisorse]

Salve,
in alternativa all'uso di input, può usare anche textarea.

Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
con entità html &lt;p&gt;Hello World!&lt;/p&gt</textarea>
<button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Per ciò che vuole fare, non è sbagliato usare input, ma in generale è preferibile l'uso di textarea.

Cordiali saluti.

[piovonotorte]

Devi utilizzare le entità html:

<input type="text" value="<p>testo paragrafo</p>" id="myInput">
<button onclick="myFunction()">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Ciao!

grazie per avermi risposto

bella l'idea ma cmq non mi funziona bene...compare sempre </p>" id="myInput">
anche eliminando <p> del codice di "embeded Code Generator"

peccato mi piaceva come idea

[piovonotorte]

Salve,
in alternativa all'uso di input, può usare anche textarea.

Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
con entità html <p>Hello World!</p></textarea>
<button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Per ciò che vuole fare, non è sbagliato usare input, ma in generale è preferibile l'uso di textarea.

Cordiali saluti.

ciao grazie della risposta
"embeded Code Generator" fornisce già un codice che permette sotto l'infografica di visualizzare un testo da copiare.
Nel modo che hai scritto mi verrebbero due textarea una sotto l'altra

[GraphOGLRisorse]

ciao grazie della risposta
"embeded Code Generator" fornisce già un codice che permette sotto l'infografica di visualizzare un testo da copiare.
Nel modo che hai scritto mi verrebbero due textarea una sotto l'altra

Io non riscontro problemi con la versione da me proposta, così come per le altre.

Creai un file di esempio con tutto il codice, in modo da ricreare il problema riscontrato, quindi riporti qui il link. Così possaiamo cercaere di trovare la soluzione.

Cordiali saluti.

[alemoppo]

bella l'idea ma cmq non mi funziona bene...compare sempre </p>" id="myInput">
anche eliminando <p> del codice di "embeded Code Generator"

In effetti sarebbe utile vedere la tua prova, a me funziona correttamente.

Ciao!

[piovonotorte]

Vorrei porvi una domanda su questa possibilità di rendere disponibile e facilmente condivisibile l'infografica presente in un sito. Ovviamente l'infografica deve essere di qualità e dare importanti info facilmente leggibili, ma effettivamente questa possibilità di condivisione aiuta l'aumento di visita del nostro sito?




OGGI POI
a mente fresca ho ripetuto questa soluzione e penso di aver risolto il problema

Salve,
in alternativa all'uso di input, può usare anche textarea.

Con textarea non mi risulta che ci siano erroi di visualizzazione, sia con l'uso delle entità html che senza.

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<textarea id="myInput" style="height:50px;width:50%;justify-content:center;">senza entità html <p>Hello World!</p> 
con entità html <p>Hello World!</p></textarea>
<button onclick="myFunction()" style="position:relative;top:-5px;">Copy text</button>

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

ho ripetuto questa soluzione e penso di aver risolto.
Il codice che da Embed Code Generator crea una textarea con il paragrafo <p> ....</p> da copiare per poter condividere facilmente l'infografica.
Con la soluzione di GraphOGLRisorse , si può benissimo andare a copiare il codice ricevuto da Embed Code Generator ,nella textarea proposta, ed andare ad eliminare la textarea precedente. In più il pulsante viene ad essere adattato dallo stesso codice del sito, con i colori e lo stile dell'ambiente.

Quindi posso dire che abbiamo risolto. GRAZIE GRAZIE