inserimento testo contemporaneo

**neo1976** · 21-06-2019, 17:54

esiste uno script che permetta durante la compilazione di un form di replicare il testo che si inserisce in una text area dentro un altro div?
in pratica l'utente scrive ad esempio nella text area il nome "ciccio" e una volta scritto questo "ciccio" appaia nell'immediato contemporaneamente dentro un testo del form stesso: il signor "ciccio" ecc...
é possibile?

**KillerWorm** · 21-06-2019, 18:43

Non so se esista uno script in PHP che facci ciò che chiedi, ma so per certo che qualcosa del genere si può realizzare abbastanza facilmente con JavaScript.

**neo1976** · 21-06-2019, 19:36

Originariamente inviata da KillerWorm

Non so se esista uno script in PHP che facci ciò che chiedi, ma so per certo che qualcosa del genere si può realizzare abbastanza facilmente con JavaScript.

Ha un nome di riferimento questo tipo di operazione in javascript?

**neo1976** · 21-06-2019, 20:34

Credo di aver trovato quello che cercavo https://www.w3schools.com/jsref/tryi...textarea_value domani lo testo per vedere se va bene per quello che sto programmando.

**neo1976** · 21-06-2019, 20:56

questo è ancora meglio: view-source:https://stacksnippets.net/js

**KillerWorm** · 21-06-2019, 21:38

Ha un nome di riferimento questo tipo di operazione in javascript?

Non ti so dire, ma si tratta di due righe di JavaScript messe in croce, proprio come ciò che hai trovato.

Qui un esempio con l'evento input in modo che l'aggiornamento sia istantaneo, come hai indicato:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>

      </style>
   </head>
   <body>
      <form>
         <input id='nome'>
         <p>Il signor <span id="segnaposto_nome"></span> ecc...</p>
      </form>
      <script>
         document.querySelector('#nome').addEventListener('input', aggiornaSegnaposto);
         function aggiornaSegnaposto(){ document.querySelector('#segnaposto_nome').innerHTML = document.querySelector('#nome').value; }
         aggiornaSegnaposto();
      </script>
   </body>
</html>

.
Ad ogni modo PHP non c'entra nulla in tutto questo. Segnalo di spostare la discussione.

**neo1976** · 22-06-2019, 11:54

Originariamente inviata da KillerWorm

Non ti so dire, ma si tratta di due righe di JavaScript messe in croce, proprio come ciò che hai trovato.

Qui un esempio con l'evento input in modo che l'aggiornamento sia istantaneo, come hai indicato:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>

      </style>
   </head>
   <body>
      <form>
         <input id='nome'>
         <p>Il signor <span id="segnaposto_nome"></span> ecc...</p>
      </form>
      <script>
         document.querySelector('#nome').addEventListener('input', aggiornaSegnaposto);
         function aggiornaSegnaposto(){ document.querySelector('#segnaposto_nome').innerHTML = document.querySelector('#nome').value; }
         aggiornaSegnaposto();
      </script>
   </body>
</html>

.
Ad ogni modo PHP non c'entra nulla in tutto questo. Segnalo di spostare la discussione.

Ho provato sia questo script che quello che la demo che ho trovato io, ma non funzionano...

**neo1976** · 22-06-2019, 12:03

Questa è la text area con cui ho provato:

codice:

<div id="rockfm_ui8sajnc8c9" data-idfield="ui8sajnc8c9" data-typefield="7" class="rockfm-textarea rockfm-field "> <div class="rockfm-field-wrap "> <div class="rkfm-row"> <div class="rkfm-col-sm-12"> <div class="rockfm-input-container"> <textarea placeholder="Aggiungi altri:" class="rockfm-txtbox-inp-val sfdc-form-control" data-uifm-tabnum="0" name="uiform_fields[ui8sajnc8c9]"></textarea> </div> </div> </div> </div> <!-- hidden data --> <div class="rockfm-fld-data-hidden" style="display:none;"> <div class="rockfm-fld-data-field_name">textarea7201</div> </div> <!--/ hidden data --> </div>

Ho impostato lo script così:

codice:

<script type="text/javascript">
        var textarea = document.getElementById('ui8sajnc8c9');
var result = document.getElementById('result');


function updateResult() {
    result.textContent = textarea.value;
}


textarea.onkeyup = updateResult;
    </script>

e poi lato html

codice:

<p id="result"></p>

poi ho provato anche così:

codice:

<script type="text/javascript">
        var textarea = document.getElementById('rockfm_ui8sajnc8c9');
var result = document.getElementById('result');


function updateResult() {
    result.textContent = textarea.value;
}


textarea.onkeyup = updateResult;
    </script>

e poi lato html

codice:

<p id="result"></p>

ma non funziona in nessun modo, in teoria dovrebbe funzionare come l'ultimo esempio di questa pagina: https://stackoverflow.com/questions/...ing-javascript

**KillerWorm** · 22-06-2019, 13:02

Nelle tue prove ci sono degli errori riguardo l'identificazione degli elementi in gioco.

L'elemento textarea qual è?
Ha un suo id?

Da quel che hai postato vedo che l'unico elemento textarea non ha un id, e che l'id che stai usando nello script (quando è scritto nel modo giusto) è riferito ad un altro elemento (un div, non un textarea).

Metti un id a quel textarea così che si possa selezionare opportunamente con getElementById.

**neo1976** · 22-06-2019, 14:13

Originariamente inviata da KillerWorm

Nelle tue prove ci sono degli errori riguardo l'identificazione degli elementi in gioco.

L'elemento textarea qual è?
Ha un suo id?

Da quel che hai postato vedo che l'unico elemento textarea non ha un id, e che l'id che stai usando nello script (quando è scritto nel modo giusto) è riferito ad un altro elemento (un div, non un textarea).

Metti un id a quel textarea così che si possa selezionare opportunamente con getElementById.

la textarea è questa:

codice:

<textarea placeholder="Aggiungi altri:" class="rockfm-txtbox-inp-val sfdc-form-control" data-uifm-tabnum="0" name="uiform_fields[ui8sajnc8c9]"></textarea>

non posso aggiungere l'id a quella textarea perchè è generata dinamicamente da un template

Discussione: inserimento testo contemporaneo

Strumenti discussione

Ricerca discussione

Visualizza

inserimento testo contemporaneo

Permessi di invio