login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Textarea live in DIV view

Offline JeroenI - 28/04/2009 21:42
Avatar van JeroenIPHP interesse Goedendag

Ik weet niet of ik het bij de juiste forum plaats, maar ik vond dit toch de meest geschikte plek.

Ik heb een textarea, en nu wil ik, zodra daarin getypt word, er een div tevoorschijn komt die live meetypt met wat de persoon intypt, een soort wysiwyg functie.

Ik wil dit graag maken maar heb geen flauw idee met welke functie ik dit kan realiseren.\

Zou iemand mij een korte uitleg kunnen geven?

Alvast bedankt!

16 antwoorden

Gesponsorde links
Offline svloeberghs - 28/04/2009 21:53 (laatste wijziging 28/04/2009 21:54)
Avatar van svloeberghs Nieuw lid 1. je maakt een textarea met een id
2. Je maakt een lege <p> aan met een id
3. Bij elke keyrelease stuur je de waarde van het tekstveld door naar een functie
4. functie maakt de <p> leeg en zet de courante waarde van de textarea erin


bv:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <textarea id="input" onkeyup="functie(this.value)"></textarea>
  2. <p id="leeg"></p>
  3.  
  4. function functie(waarde){
  5. 	var output = document.getElementById('leeg');
  6. 	output.innerHTML="";
  7. 	output.appendChild(document.createTextNode(waarde));
  8. }
Offline JeroenI - 28/04/2009 22:23
Avatar van JeroenI PHP interesse Nice ! Thanks! Dat werkt.

Kan ik ook nog realtime smilies laten weergeven, of niet?
Offline Gerard - 28/04/2009 22:31
Avatar van Gerard Ouwe rakker Je zou dan met behulp van Javascript al een replace uit moeten voeren. Die functionaliteit staat hier op Sitemasters ook wel uitgelegd tussen het overzicht. Probeer ook nog eens een keer goed rond te zoeken op het forum, want ik denk dat dit al een keer voorbij is gekomen.

Het is een aardige functionaliteit, maar je moet er goed mee omgaan anders wordt het irritant/zwaar. Bij elke toets die preview laden kan nogal wat vertraging opleveren. Ik vind het zelf bij Hyves al bijzonder irritant.
Offline svloeberghs - 28/04/2009 22:34 (laatste wijziging 28/04/2009 22:34)
Avatar van svloeberghs Nieuw lid ja tuurlijk , dan moet je uw emoticon afkortingen in uw functie verwerke tot img elementen

da gaat wel met ne preg_match. Iets in de aard van dit :

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if(tekst = :) ){
  2.   var img = document.createElement('img');
  3.   img.src="images/smiley.jpg";
  4.   output.appendChild(img)
  5. }
Offline JeroenI - 28/04/2009 22:38 (laatste wijziging 28/04/2009 23:11)
Avatar van JeroenI PHP interesse En datzelfde geldt voor enters? Dus dan bedoel ik

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if (tekst = <br> )
etcetera ?
[edit]
ik heb nu onderstaande maar dan werkt het helemaal niet meer:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function functie(waarde){	
  2. var output = document.getElementById('voorbeeld1');
  3.  
  4. if(waarde = :) ){  
  5. var img = document.createElement('img');  
  6. img.src="images/smileys/smile.png";  
  7. output.appendChild(img)
  8. }
  9.  
  10. output.innerHTML="";	
  11. output.appendChild(document.createTextNode(waarde));
  12. }


titjes schreef:
CODETAGS!
Offline bas1995 - 28/04/2009 23:11 (laatste wijziging 28/04/2009 23:15)
Avatar van bas1995 Onbekend gebruik even de [ code=taal ] & [ /code ] tags en dan zonder de spaties ertusen
Offline Abbas - 28/04/2009 23:13
Avatar van Abbas Gouden medaille

Crew .NET		 Het is dan wel:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if(tekst == "<br />")
  2.     //...

en:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if(waarde = ":)" )

Een string zet je tussen double quotes! 
Offline bas1995 - 28/04/2009 23:15 (laatste wijziging 28/04/2009 23:16)
Avatar van bas1995 Onbekend Thanx voor het verbeteren van mijn taal. 

titjes schreef:
Zorg dan dat het niet meer hoeft! 
Offline svloeberghs - 28/04/2009 23:16 (laatste wijziging 28/04/2009 23:17)
Avatar van svloeberghs Nieuw lid Of enkele, maakt niet veel uit. 
Kwou maar even aantonen hoe hij het moest uitzoeken.

titjes schreef:
Shizzle-taal hoort hier niet. 
Offline Abbas - 28/04/2009 23:16
Avatar van Abbas Gouden medaille

Crew .NET		 Door hem op het verkeerde pad te sturen? 
Offline svloeberghs - 28/04/2009 23:19 (laatste wijziging 28/04/2009 23:19)
Avatar van svloeberghs Nieuw lid ja nee , als hij al een beetje kan programmeren dan wist hij dat strings altijd gequoteerd worden.. hij wist dit blijkbaar nog niet en heeft er nu dan pas ook uit geleerd ;) grtz
Offline bas1995 - 28/04/2009 23:33 (laatste wijziging 29/04/2009 00:34)
Avatar van bas1995 Onbekend Nu heb ik nog een vraagje. Hoe doe je de enters? En als je ': )' typt dan staat er de tekst én het plaatje. Hoe krijg je dat stukje tekst dan weg? En kan je dit ook combineren met php?

titjes schreef:
Kerel, let nu toch eens een beet je op je taal en gebruik van leestekens. Het is niet de eerste keer dat dit vermeld wordt tegenover jou!
Offline JeroenI - 01/05/2009 13:37
Avatar van JeroenI PHP interesse Bedankt voor alle reacties.

Ik heb nu dit:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function functie(waarde){	
  2. var output = document.getElementById('voorbeeld1');
  3.  
  4. if(waarde == ":)") {
  5. var img = document.createElement('img');  
  6. img.src="images/smileys/smile.jpg";  
  7. output.appendChild(img)
  8. }
  9.  
  10. output.innerHTML="";	
  11. output.appendChild(document.createTextNode(waarde));
  12. }


Maar helaas vervangt hij niet in de smilie... Wat doe ik verkeerd? 
Offline Koen - 01/05/2009 14:29 (laatste wijziging 01/05/2009 15:56)
Avatar van Koen PHP expert Eerst zet je der een afbeelding in, en daarna maak je de innerHTML weer leeg?  

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. if(waarde == ":)") {
  2. function functie(waarde){    
  3. var output = document.getElementById('voorbeeld1');
  4. var img = document.createElement('img');  
  5. img.src="images/smileys/smile.jpg";  
  6. output.appendChild(img)
  7. } else {
  8. output.innerHTML="";    
  9. output.appendChild(document.createTextNode(waarde));
  10. }
  11. }

Bedoel je zeker? 
Offline svloeberghs - 01/05/2009 15:16
Avatar van svloeberghs Nieuw lid Dit gaat wel alleen maar werken als je waard exact gelijk is aan ':)'. Wat je moet doen is de ':)' eerst uit je 'waarde' halen en die tekens dan vervangen door
'
var img = document.createElement('img');
img.src="images/smileys/smile.jpg";

'
Offline JeroenI - 01/05/2009 23:03
Avatar van JeroenI PHP interesse Ik begrijp het toch niet helemaal. Kan je n.a.v. van mijn code het misschien laten zien?
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.211s