Smiley invoegen nadat je op de afbeelding klikt

[Typhon]

Hey, Ik ben een gastenboek aan het maken in PHP voor eigen gebruik, alles werkt zoals ik het wil behalve het emoticon systeem.
Ik heb het al voor mekaar gekregen om '' in de respectievelijke emoticon te laten veranderen.
Maar aangezien ik er een stuk of 50 heb wil ik de gasten het niet aandoen om hun 'activeringscode' zelf uit te typen.

Wat ik eigenlijk wil bekomen is het volgende:

Wanneer je op een emoticon drukt dan verschijnt zijn 'activeringscode' in het tekstveld genaamd vcomment waar je cursor zich voor het laatst bevond.

Ik heb al enkele dingen geprobeerd (zie hieronder), jammergenoeg zonder succes...

<script language="JavaScript" type="text/javascript">
function emoticon {
   var vcomment = document.post.body;
   text = ' ' + text + ' ';
   if (vcomment.createTextRange && vcomment.caretPos) {
      var caretPos = vcomment.caretPos;
      caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
      vcomment.focus();
   } else {
      vcomment.value  += text;
      vcomment.focus();
   }
}
</script>

<a href="#" onClick="emoticon(':)')"><img src="/imgs/emoticons/1.gif" border="0" alt="" title=""></a>

Hopelijk kunnen jullie me helpen, dank bij voorbaat.

 

[That Guy]

zoiets? Heb k ook gebruikt als form-smiley-invoeger:

//js
	function insertAtCaret(obj, text) {
		if(document.selection) {
			obj.focus();
			var orig = obj.value.replace(/\r\n/g, "\n");
			var range = document.selection.createRange();

			if(range.parentElement() != obj) {
				return false;
			}

			range.text = text;
			
			var actual = tmp = obj.value.replace(/\r\n/g, "\n");

			for(var diff = 0; diff < orig.length; diff++) {
				if(orig.charAt(diff) != actual.charAt(diff)) break;
			}

			for(var index = 0, start = 0; 
				tmp.match(text) 
					&& (tmp = tmp.replace(text, "")) 
					&& index <= diff; 
				index = start + text.length
			) {
				start = actual.indexOf(text, index);
			}
		} else if(obj.selectionStart) {
			var start = obj.selectionStart;
			var end   = obj.selectionEnd;

			obj.value = obj.value.substr(0, start) 
				+ text 
				+ obj.value.substr(end, obj.value.length);
		}
		
		if(start != null) {
			setCaretTo(obj, actual.indexOf(text, index) + text.length /2 );
		} else {
			obj.value += text;
		}
	}
	

	function setCaretTo(obj, pos) {
		if(obj.createTextRange) {
			var range = obj.createTextRange();
			range.move('character', pos);
			range.select();
		} else if(obj.selectionStart) {
			obj.focus();
			obj.setSelectionRange(pos, pos);
		}
	}

Bijvoorbeeld:

//js

var obj = document.getElementById('je_text_veld');
insertAtCaret(obj, " :) ")

De 'setCaretTo' is handig. Bijvoorbeeld om de curser helemaal achteraan te zetten:

//js

var obj = document.getElementById('je_text_veld');
setCaretTo(obj,obj.innerHTML.length);

oid.


:thumb:

 

[Typhon]

Nja sorry maar als het om javascript gaat ben ik wel een leek...

Dus het eerste stuk code plaats ik in de header ? En de andere 2 ?

En hoe call ik dan die functie ?

Zo ?

<a href="#" onClick="insertAtCaret"><img src="/imgs/emoticons/1.gif" border="0" alt="" title=""></a>

 

[That Guy]

ja, die 2 functies plaats je tussen <script type='text/javascript'> en </script> tags in je head.

De functie zelf roep je zo aan:

//html + js
<a href="#" onClick="insertAtCaret(document.getElementById('mijn_veld'),':)');"><img src="/imgs/emoticons/1.gif" border="0" alt="" title=""></a>

oid.




Het wordt er niet makkelijker op als je zoveel javascript in je html stopt, dus we maken het wat makkelijker:

Deze functie zet je dus ook in je head, bij de andere 2:

//javascirpt
function smiley(welke)
{
   var obj = document.getElementById('mijn_input');
   insertAtCaret(obj, welke);
}

Je moet dan dus het invoer-vak waar het om gaat het id 'mijn_input' geven, of die dus in de smiley() functie even aanpassen.

Dan wordt je html code zo:

//html + js
<a href="#" onClick=" smiley(':)'); ">
   <img src="/imgs/emoticons/1.gif" border="0" alt="" title="">
</a>

etcetera.


:thumb:

 

[Typhon]

Dees is dus de code die zich in de header bevind:

<script type="text/javascript">
function insertAtCaret(obj, text) {
		if(document.selection) {
			obj.focus();
			var orig = obj.value.replace(/\r\n/g, "\n");
			var range = document.selection.createRange();

			if(range.parentElement() != obj) {
				return false;
			}

			range.text = text;
			
			var actual = tmp = obj.value.replace(/\r\n/g, "\n");

			for(var diff = 0; diff < orig.length; diff++) {
				if(orig.charAt(diff) != actual.charAt(diff)) break;
			}

			for(var index = 0, start = 0; 
				tmp.match(text) 
					&& (tmp = tmp.replace(text, "")) 
					&& index <= diff; 
				index = start + text.length
			) {
				start = actual.indexOf(text, index);
			}
		} else if(obj.selectionStart) {
			var start = obj.selectionStart;
			var end   = obj.selectionEnd;

			obj.value = obj.value.substr(0, start) 
				+ text 
				+ obj.value.substr(end, obj.value.length);
		}
		
		if(start != null) {
			setCaretTo(obj, actual.indexOf(text, index) + text.length /2 );
		} else {
			obj.value += text;
		}
	}
	

	function setCaretTo(obj, pos) {
		if(obj.createTextRange) {
			var range = obj.createTextRange();
			range.move('character', pos);
			range.select();
		} else if(obj.selectionStart) {
			obj.focus();
			obj.setSelectionRange(pos, pos);
		}
	}
	function smiley(welke)
{
   var obj = document.getElementById('vcomment');
   insertAtCaret(obj, welke);
}</script>

Hier call ik de functie:

<a href="#" onClick=" smiley(':)'); ">
   <img src="/gastenboek/imgs/emoticons/1.gif" border="0" alt="" title="">
</a>

Maar ik krijg ng altijd geen resultaat

 

[ErikBooy007]

Je gebruikt document.getElementById, maar je textarea heeft geen id.

Als je er dit van maakt zal het wel werken:

<textarea name="vcomment" id="vcomment" cols="40" rows="7" wrap="virtual">

 

[Typhon]

Idd het werkt, welbedankt iedereen.