Avatar billede ulrik-nielsen Nybegynder
03. februar 2002 - 22:44 Der er 23 kommentarer og
1 løsning

Tekst fra et textarea bliver vist mens der skrives

Hej..

Jeg spurgte i sin tid her på eksperten:

Er der nogen der har et script eller kan give et hint til hvordan man laver script der viser det man skriver i et textarea?? Altså hvis man skriver et bogstav bliver det vist med det samme.. Eller hvis man sætter en HTML-kode ind for til et billede bliver billedet vist og man kan der ved se hvordan indlæget kommer til at se ud inden man trykker "Opret nyhed" Mvh Ulrik

Jeg fil følgende svar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  <!--

  function transferText(bBreak){
      if( event.keyCode == 13 && event.type == "keypress" ){
          document.frm.txtarea.value += "<br>";
        }
      document.all.container.innerHTML = document.frm.txtarea.value;
  }
    function init(){
        document.frm.txtarea.onkeypress = transferText;
        document.frm.txtarea.onkeyup = transferText;
    }
    //-->
  </SCRIPT>
</head>

<body onload="init();">
<form name="frm">
<textarea name="txtarea" cols="40" rows="7"></textarea>
</form>
<div id="container" style="border:1px solid black;height:150px;width:340px;"></div>


</body>
</html>

Men så ville jeg gerne have det ændret lidt!!:

Hvis man har skrevet en lang text og man sætter sin markør ind midt i texten og tryker "enter" for at lave ny linje så laver den <BR> til sidst i texten og ikke der hvor man satte markøren!!

Og kan man ikke også få den til at fx hvis man sætter value til et eller andet i text feltet så det bliver vist med det samme i container'en... Hvis man gøre det bliver det kun vist i textareaet men ikke i container'en. Det bliver godt nok vist hvis man ændre på noget af texten!! men... kan det ikke laves???

Mvh Ulrik
Avatar billede rune_c Nybegynder
03. februar 2002 - 23:39 #1
Vupti..:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
  <!--

  function transferText(bBreak){
      document.all.container.innerText = document.frm.txtarea.value;
  }
    function init(){
        document.frm.txtarea.onkeypress = transferText;
        document.frm.txtarea.onkeyup = transferText;
    }
    //-->
  </SCRIPT>
</head>

<body onload="init();">
<form name="frm">
<textarea name="txtarea" cols="40" rows="7"></textarea>
</form>
<div id="container" style="border:1px solid black;height:150px;width:340px;"></div>


</body>
</html>
Avatar billede rune_c Nybegynder
03. februar 2002 - 23:42 #2
denne her indsætter bare ingen <br>'er hvilke jeg personligt synes var ret i irriterende. Hvis man ville forklare om forskellige HTML tags har du altså et problem. ex

Jeg vil nu fortæller om hvordan man laver et linieskift i HTML. Man skriver "<br>" - uden "'erne.

Resultat:

Jeg vil nu fortæller om hvordan man laver et linieskift i HTML. Man skriver "
" - uden "'erne.
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 12:10 #3
Det virker ikke helt :-(
Hvis man skriver:
    "Hej<H1>Jeg hedder Ulrik<H1>"
Viser den:
    "Hej<H1>Jeg hedder Ulrik<H1>"

Den skulle jo gerne vise "Jeg hedder Ulrik" med stort!!!
Avatar billede rune_c Nybegynder
04. februar 2002 - 15:47 #4
Du må vælge!! Det andet kan godt lade sig gøre, MEN kun hvis klienten bruge piltasterne!! Det kan IKKE lade sig gøre hvis musen bruges. Du kan ikke finde positionen på cursoren i et text-area. Hvis du gerne vil have det andet kan du bare sige til...
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 16:08 #5
æv.. Det virker ellers rigtigt godt nu!!! Men dvs. at man ikke kan beholde det som den gør nu + den viser HTML-koder?? (Altså hvis man skriver koden for et billede bliver det vist) Ellers vil jeg gerne have så det kan det, selv om jeg midster det andet!! :-)
Avatar billede Slettet bruger
04. februar 2002 - 16:31 #6
Prøv lige at ændre denne funktion:

function transferText(bBreak){
document.all.container.innerText = document.frm.txtarea.value;
}

... til:

function transferText(bBreak){
document.all.container.innerHTML = document.frm.txtarea.value;
}
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 16:44 #7
nu viker HTML!! Men nu viser den ikke ny linje når jeg trykker Enter :-(
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:01 #8
det er jo klart at den ikke indsætter et linieskift hvis man trykker enter da den indsætter det som HTML kode!!!
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:02 #9
hvad skal du egentligt bruge det til??
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 17:04 #10
ok.. Dvs. det er umulig at lave? :-(
Jeg skal bruge det til en adminside hvor admins kan oprette nyhedder.. Så for at kunne se hvordan det kommer til at se ud inden man poster den!!!
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:05 #11
så lav et preview...
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:06 #12
med mit script bliver alle linieskift lavet som "\n". Inden du så viser den bruger du replace functionen til at skifte alle \n ud med <br>
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:09 #13
du kunne evt. lave en knap der hedder Preview. Når den trykkes åbner den et nyt vindue med window.open. Du henter så teksten med window.opener!
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 17:09 #14
Jaa... Det er federe sådan her!!!!
Det er også det jeg har gjort... men med dit script viker andre html koder ikke!! :-/ jo de virker self. når siden er postet men man kan ikke se html koderne i containeren!!
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:13 #15
det kommer an på om man skal skrive <br> ved et linie skift. Du skal selvfølgelig bruge innerHTML. hvis man ikke selv behøver at skrive <br> ved linieskift skal du først bruge replace funktionen.

Hvis du heller vil have det på den anden måde kan jeg godt løse dit problem!!!
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 17:22 #16
Jeg forstår ikke helt :-/ Jeg skriver lige tydeligt hvad den skal kunne:

1. Lave nyt linje skift uden at skrive <BR>. (Jeg bruger nl2br() )
2. Vise HTML-kommandoer som fx <H1> eller <IMG scr=....
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:30 #17
jaja jeg er i gang med at lave det så det virker helt...Det skal nok komme til at virke!! :) Altså med linieskift, billede og andre HTML tags
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 17:32 #18
weee :-) takker!!! Du skal nok få en ordenlig slat point!!
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:33 #19
danke danke jeg skal ned og træne nu..kan jeg kontakte dig senere pr email...
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 17:35 #20
jeps! un@get2net.dk
Avatar billede rune_c Nybegynder
04. februar 2002 - 17:47 #21
nå jeg blev lige færdig...:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<form name="frm">
<textarea name="txtarea" cols="40" rows="7"></textarea>
</form>
<div id="container" style="border:1px solid black;height:150px;width:340px;"></div>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function transferText(){
  var str = document.frm.txtarea.innerText;
  while (str.indexOf("\n") >= 0 || str.indexOf(" ") >= 0){
    str = str.replace("\n", "<br>");
    str = str.replace(" ", "&nbsp;");
  }

  document.all.container.innerHTML = str;
}

document.frm.txtarea.onkeypress = transferText;
document.frm.txtarea.onkeyup = transferText;

</SCRIPT>

</body>
</html>
Avatar billede rune_c Nybegynder
04. februar 2002 - 19:26 #22
hmm...virker det...????
Avatar billede ulrik-nielsen Nybegynder
04. februar 2002 - 20:29 #23
Hey... Jeps!!! Det virker tosse godt!!! Mange tak for hjælpen!!
Avatar billede lademan Novice
13. oktober 2002 - 01:23 #24
Jeg kan ikke se HMTL som fx billeder med det script?

Kan det ikke lade sig gøre?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester