Skrive tekst i input og få det opp en annen sted

HoaXed · 18. november 2006

Hællæ!

Jeg har nå lest gjennom hele javascriptsource.com og 8 sider her på forumet men har ennå ikke funnet hva jeg egentlig er ute etter, er ikke så flink i dette heller. Ennå.

Det jeg trenger at når jeg skriver i en input kommer det opp "live" på en annen del av siden. Hvordan kan dette gjøres?

Takk.

Drømmemannen · 18. november 2006

Enkel versjon:

<p id="output"></p>

<input type="text"
   onkeyup="document.getElementById( 'output' ).innerText = this.value">

En litt mer standard-kåt versjon:

<script type="text/javascript">

   function displayThis( text ) {
       var outputElement = document.getElementById( "output" );
       var output = document.createTextNode( text );

       if ( outputElement.firstChild ) {
           outputElement.replaceChild( output, outputElement.firstChild );
       } else {
           outputElement.appendChild( output );
       }
   }

</script>

<p id="output"></p>

<input type="text" onkeyup="displayThis( this.value )">

Edit: Jeg ville forresten gått for den standard-kåte versjonen. Ingen grunn til å bruke ustandard kode når man kan bruke standard kode.

Her har du en standard-kåt versjon som rydder opp etter seg også!

<script type="text/javascript">

   function displayThis( text ) {
       var outputElement = document.getElementById( "output" );

       if ( text.length == 0 ) {
           if ( outputElement.firstChild ) {
               outputElement.removeChild( outputElement.firstChild );
           }
       } else {
           var output = document.createTextNode( text );

           if ( outputElement.firstChild ) {
               outputElement.replaceChild( output, outputElement.firstChild );
           } else {
               outputElement.appendChild( output );
           }
       }
   }

</script>

<p id="output"></p>

<input type="text" onkeyup="displayThis( this.value )">

Endret 18. november 2006 av balletryne

HoaXed · 27. november 2006

Tusen takk for eksempelet du ga meg. Har prøvd meg helt siden du skrev det men har ennå ikke klart å integrere det eller forandre det til min fordel. Kan forklare nærmere hva det skal brukes til.

Litt ned på siden her har jeg tre inputbokser, når noe fylles inn i disse feks FF0000 så endres teksten til rød. Tar jeg FFFFFF blir den hvit. Får den rett og slett ikke til å forandre seg.

Noen som kan hjelpe meg litt videre på vei?

Kagee · 29. november 2006

Du forklarte deg ikke så bra i post 1. Dette er CTRL + C fra DW, håper du klarer å tilpasse det dine formål.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Untitled Document</title>

function changeColor(from, to) {

document.getElementById(to).style.color = from;

}

</script>

</head>

<body>

<tr>

<td><label for="textfield">Bakgrunnfarge -</label></td>

<td><input name="textfield" onkeyup="changeColor(this.value, 'textfield_preview')" type="text" value="000000" /><span id="textfield_preview">Valgt farge!</span></td>

</tr>

<tr>

<td><label for="textfield2">Tekstfarge -</label></td>

<td><input name="textfield2" onkeyup="changeColor(this.value, 'textfield2_preview')" type="text" value="000000" /><span id="textfield2_preview">Valgt farge!</span></td>

</tr>

<tr>

<td><label for="textfield3">Tekstfarge 2 -</label></td>

<td><input name="textfield3" onkeyup="changeColor(this.value, 'textfield3_preview')" type="text" value="FF0000" /><span id="textfield3_preview">Valgt farge!</span></td>

</tr>

</table>

</body>

</html>

Edit: Typo x2

Endret 29. november 2006 av Kagee

AlecTBM · 3. desember 2006

jeg har et enkelt script som jeg sikkert kan endre litt på

EDIT:

<html>
<head>
<script>
function live( input, output )
{
var input2 = document.getElementById( input ).value
document.getElementById( output ).style.color = input2
}
</script>
</head>
<body>
<textarea id="input" onkeyup="live('input', 'output')"></textarea><br><br>
<p style="color: #FF0000; " id="output">Tekst</p><br><br>
</body>
</html>

der har du den

Endret 3. desember 2006 av AlecTBM

Logg inn

Skrive tekst i input og få det opp en annen sted

Anbefalte innlegg

HoaXed

Lenke til kommentar

Videoannonse

Drømmemannen

Lenke til kommentar

HoaXed

Lenke til kommentar

Kagee

Lenke til kommentar

AlecTBM

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Kjekk fyr i resepsjonen på treningssenteret 1 2 3 4 6

Hvem er aktive 0 medlemmer