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

Videoannonse

Drømmemannen

HoaXed

Kagee

AlecTBM

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer