1

I have a page where a user can edit the contents of an email that is sent out (the template).

Here is a look at what my page is like:

enter image description here

The Code:

<a name="tag" data-toggle="tooltip" tag="<<SubmitterFirst>>" title="The first name of the employee submitting the nomination">&lt;&lt;SubmitterFirst&gt;&gt;</a>

...

$('[name=tag]').click(function(){
        var caretPos = document.getElementById("templateContent").selectionStart,
            currentTemplate = $('#templateContent').val(),
            theTag = $(this).attr('tag');
        $("#templateContent").empty().val(currentTemplate.substring(0, caretPos) + theTag  + currentTemplate.substring(caretPos));
        $("#templateContent").focus();
    });

This seems to work fine in firefox with the adding of the tag at the cursor but when I do it in IE, it duplicates the whole template at the position.

I think the issue is happening here where its putting the content of the template back after adding the tag:

+ theTag  + currentTemplate.substring(caretPos)

Any suggestions of how I can get this to work in IE or another suggestion?

See this jsFiddle for an example:

http://jsfiddle.net/cTzzs/

I have also tried the suggestions from the similar question here Inserting a text where cursor is using Javascript/jquery but none of them worked in IE8.

Here is an updated fiddle of another attempt. Works in FF but not IE8;

http://jsfiddle.net/qBWn7/

In ie8, it places the tag anywhere within the textarea, not where the cursor is.

UPDATE

This question solved my answer: Inserting text after cursor position in text areа which links to the jsfiddle of http://jsfiddle.net/rmDzu/2/

Community
  • 1
  • 1
SBB
  • 8,560
  • 30
  • 108
  • 223
  • 1
    possible duplicate of [Inserting a text where cursor is using Javascript/jquery](http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery) – Casey Falk Jul 30 '14 at 16:35
  • That is where I got the answer from in the first place which doesn't work in IE: http://stackoverflow.com/a/15977052/2628921 – SBB Jul 30 '14 at 16:35
  • 1
    Did you try the "correct answer" as well or just the jQuery one? – Casey Falk Jul 30 '14 at 16:37
  • Also, note the 3rd answer that explicitly states, "The code above didn't work for me in IE." :) If you have tried the other answers, update your question por favor. :) – Casey Falk Jul 30 '14 at 16:38
  • Thanks, tried that one as well but it didnt work. – SBB Jul 30 '14 at 16:44
  • Does it make a difference if you use mousedown instead of click? [Don't have IE available at the moment to test myself] – epascarello Jul 30 '14 at 16:47
  • *"didn't work"* -- how so? Could you post your code for it? It actually tests the browser version and has a specific case for IE. How far back are you trying to support? – Casey Falk Jul 30 '14 at 16:47
  • I used the "answer" from the question that was marked as similar. In IE8 (the lowest i need to support) it randomly places the tag anywhere in the text area, its never the same place. – SBB Jul 30 '14 at 16:48
  • @SBB see [Question 263743](http://stackoverflow.com/questions/263743/caret-position-in-textarea-in-characters-from-the-start/3373056#3373056) – gillyspy Jul 30 '14 at 17:00
  • 1
    This answer http://stackoverflow.com/questions/5203428/inserting-text-after-cursor-position-in-text-are%D0%B0 worked for me. Well, the comment on the answer to this jsFiddle http://jsfiddle.net/rmDzu/2/ – SBB Jul 30 '14 at 17:03

0 Answers0