Change Form Value By Focus

[jaymc]

Right, I am making a PM system, when sending a message users can click on an emoticon and have the emoticon code inserted in the message box

That works fine, see below for the code im currently using

[code]<a OnClick="document.form.message.value = document.form.message.value + ' :boxing: '";><img src=default/boxing.gif border=0></a>[/code]

However, On clicking the emotion image the code is being inserted at the end of the text in the message box

This still works, but, if someone has typed 3 lines out and decides the want an emoticon on line 2, on clicking the emoticon it is inserted at the end (line 3)

How can I get it to insert the emoticon code where the focus of the cursor is currently at?

Thanks

[fenway]

There are multiple threads on these boards that discuss how to find the currrent caret position... search for them.

[jaymc]

I dont know what to search for though

Caret postion?

I searched for that and it gave no matches

[fenway]

I don't know either... something with TEXTAREAs and cursor positions, I think.  If I can find the thread(s) again, I'll provide you with the link.

[jaymc]

Ive found this code but im unsure how to use it, im not too good with javascript, this is above my level

[code]function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == ‘0′) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
// calling the function
insertAtCursor(document.formName.fieldName, ‘this value’);[/code]

I assume I would call it like this

[b]OnClick="insertAtCursor(myField, myValue)"[/b]

What should MyField and myValue be?

Also, do i need to change the properties of this line

[b]// calling the function
insertAtCursor(document.formName.fieldName, ‘this value’);[/b]

fornName = manually enter the name of my form etc?

[jaymc]

This works in IE perfect, but in firefox, it inserts the value at the begining of the text area, god knows why. Anyway, here is the code, any ideas why?

Or perhaps another script I can use?

This works :)

[code] <script LANGUAGE=\"Javascript\">
var globalCursorPos; // global variabe to keep track of where the cursor was

function setCursorPos() {
  globalCursorPos = getCursorPos(form.message);
}

function getCursorPos(textElement) {
  var sOldText = textElement.value;

  var objRange = document.selection.createRange();
  var sOldRange = objRange.text;

var sWeirdString = '#%~';


  objRange.text = sOldRange + sWeirdString; objRange.moveStart('character', (0 - sOldRange.length - sWeirdString.length));

var sNewText = textElement.value;


  objRange.text = sOldRange;

  for (i=0; i <= sNewText.length; i++) {
    var sTemp = sNewText.substring(i, i + sWeirdString.length);
    if (sTemp == sWeirdString) {
    var cursorPos = (i - sOldRange.length);
      return cursorPos;
  }
}
}


function insertString(stringToInsert) {
  var firstPart = form.message.value.substring(0, globalCursorPos);
  var secondPart = form.message.value.substring(globalCursorPos, form.message.value.length);
form.message.value = firstPart + stringToInsert + secondPart;
}

</SCRIPT>[/code]

[fenway]

Like I said, I'm not familiar with these scripts, so I can't really help much... I don't know the intricacies of how FF handles this.