login  Naam:   Wachtwoord: 
Registreer je!
 Forum

automatisch code plaatsen waar de cursor staat in een textarea (Opgelost)

Offline Jorisvh - 12/08/2013 20:54 (laatste wijziging 21/08/2013 09:09)
Avatar van JorisvhLid Hallo

Ik ben op zoek naar javascript code om het volgende te doen:
Het is de bedoeling om met een formulier een mail samen te stellen die naar een grote groep mensen verzonden wordt.
Hierin wil ik velden kunnen plaatsen zodat bij het versturen van de mails de juiste waarde uit de database wordt ingevuld.
Nu wil ik dus een waarde selecteren uit een keuzelijst en de code moet geplaatst worden op de plaats van de cursor in de textarea.
Hoe kan ik dit doen?

Zie hier mijn html code voor de berichttekst:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. Bericht: Veld toevoegen: <select name="veld" size="1" onchange="veld_toevoegen()">
  2. <option value="" selected>Selecteer </option>
  3. <option value="*|voornaam|*">voornaam</option>
  4. <option value="*|naam|*">naam</option>
  5. <option value="*|nr|*">nr</option>
  7. <textarea name="bericht" rows="10" cols="100">

3 antwoorden

Gesponsorde links
Offline Rens - 16/08/2013 22:01
Avatar van Rens Gouden medaille

Crew algemeen		 Hoi,

Is redelijk simpel om te doen, je moet alleen even weten hoe je de waarde uit een textveld ophaalt en er een waarde bij zet.
Met de volgende functie haal je de waarde op:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function veld_toevoegen(sTag, sField)
  2. {
  3.     var sWaarde = document.getElementById(sField).value;
  4.     sWaarde += sTag;
  5.     document.getElementById(sField).value = sWaarde;
  6. }


Je moet nu alleen nog in je HTML code zorgen dat de waarde die jij selecteerd in je selectbox word meegestuurd naar je functie en dit in het juiste textveld word gezet.
Dit doe je met "this.value" en door de ID van je textveld mee te geven.
Je HTML code word dan:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <select name="veld" size="1" onchange="veld_toevoegen(this.value, 'id_van_textveld')">


Beetje duidelijk wat er gebeurd?

Gr,
Rens
Offline WouterJ - 18/08/2013 12:43
Avatar van WouterJ HTML gevorderde Het enige probleem is dat de code van Rens niet werkt met de plaats van de cursor, maar met het eind van het bericht.

De plaats van de cursor ophalen is wat moeilijker en kan zo nu en dan ook verschillen per browser. Voor DOM 3.0 browsers (alles behalve oude IE) kun je event.selectionStart gebruiken. Voor oldIE is dat wat moeilijker. In het totaal heb ik gewoon dit script van internet geplukt:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function getCaret(el) { 
  2.   if (el.selectionStart) { 
  3.     return el.selectionStart; 
  4.   } else if (document.selection) { 
  5.     el.focus(); 
  6.  
  7.     var r = document.selection.createRange(); 
  8.     if (r == null) { 
  9.       return 0; 
  10.     } 
  11.  
  12.     var re = el.createTextRange(), 
  13.         rc = re.duplicate(); 
  14.     re.moveToBookmark(r.getBookmark()); 
  15.     rc.setEndPoint('EndToStart', re); 
  16.  
  17.     return rc.text.length; 
  18.   }  
  19.   return 0; 
  20. }


Verder heb ik nog even Rens's onchange scriptje verbeterd. Het is nu niet meer inline (beter), het cached dingen die lang kunnen duren en het verwijderd een nutteloze parameter:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var elemTextbox = document.getElementById('textbox');
  2. var elemSelect  = document.getElementById('text-values');
  3.  
  4. elemSelect.onchange = function (e) {
  5.     var textboxValue    = elemTextbox.value; // de huidige value van het textbox
  6.     var caretPosition   = getCaret(elemTextbox); // positie van de cursor
  7.     var textBeforeCaret = textboxValue.substr(0, caretPosition); // text voor de cursor
  8.     var textAfterCaret  = textboxValue.substr(caretPosition); // text na de cursor
  9.     var selectedValue   = this.value; // de geselecteerde waarde
  10.  
  11.     // voeg nu de geselecteerde waarde tussen de text voor en na de cursor in
  12.     elemTextbox.value = textBeforeCaret + selectedValue + textAfterCursor;
  13. }:
Offline Jorisvh - 22/08/2013 20:38
Avatar van Jorisvh Lid Bedankt WouterJ voor je moeite.

Maar ik heb zelf al een oplossing gevonden. Ik had niet vermeld dat ik ook met tinymce editor werk.
Na wat zoekwerk heb ik daar toch een oplossing gevonden:

Ik heb de nieuwe versie gedownload, nl: http://www.tinymce.com/download/download.php
In mijn php-document heb ik het volgende ingevoegd:
<script type="text/javascript" src="../tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="../js/word.js"></script>

../js/word.js bevat:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. tinymce.init({
  2.         selector: "textarea",
  3.         plugins: [
  4.                 "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
  5.                 "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
  6.                 "table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
  7.         ],
  8.  
  9.         toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
  10.         toolbar2: "cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor",
  11.         toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
  12.  
  13.         menubar: false,
  14.         toolbar_items_size: 'small',
  15.  
  16.         style_formats: [
  17.                 {title: 'Bold text', inline: 'b'},
  18.                 {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
  19.                 {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
  20.                 {title: 'Example 1', inline: 'span', classes: 'example1'},
  21.                 {title: 'Example 2', inline: 'span', classes: 'example2'},
  22.                 {title: 'Table styles'},
  23.                 {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
  24.         ],
  25.  
  26.         templates: [
  27.                 {title: 'voornaam', content: '*|voornaam|*'},
  28.                 {title: 'naam', content: '*|naam|*'},
  29.                 {title: 'nr', content: '*|nr|*'}
  30.         ]
  31. });


Zie vooral tabel templates!


Met de 3de laatste knop op de 3de knoppenbalk kan ik met insert template exact bekomen wat ik wou!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.176s