Insert symbol into textarea where cursor is

[joe92]

Hi there. I have a problem with my javascript. I want to insert a symbol into a textarea when the person clicks on the link (just like the smiley selection in this forum). I then need the cursor to focus back to where they were when they clicked so they can carry on typing as normal. The current code I have has such a varied response across the browsers that I am just confused. When used in Firefox or Opera, it will insert the symbol to where the cursor was, but will then not focus back there and if the user clicks again will insert the symbol at the end. However, with Safari and Chrome they are slightly different. They will insert the symbol to where the cursor was and will not focus back there, but if the user clicks again will insert the symbol before the last one. Then theres IE (). If the user clicks to insert the symbol it will insert it at the beginning only and will not refocus.

 

Any help will be much appreciated.

Joe

 

 

The js code.

function insertSymbol(id,td)
{
	var symbol = document.getElementById(id).innerHTML
	var textAreaContent = document.getElementById(td)
	var first = textAreaContent.value.slice(0, textAreaContent.selectionStart)
	var second = textAreaContent.value.slice(textAreaContent.selectionStart)
	textAreaContent.value = first + symbol + second
	textAreaContent.focus(selectionStart) 

// Removing 'selectionStart' from the focus function will let it refocus at the end of the text in IE and FF. Will refocus in front of the newly inputted symbol in Safari and Chrome. Will not work at all in Opera.

}

 

The html code.

onClick="insertSymbol('##', 'textArea')"

[freelance84]

 

I've got a similar issue. After lots of digging I'm about to give up. Basically it comes down to finding the correct cursor position in the string within the textarea... after lots of reading it seems very difficult.

 

 

Does anyone know a jquery way of doing this?

[freelance84]

http://www.webdeveloper.com/forum/showthread.php?t=74982