In my project, I am trying to add HTML tag letter (< and >) dynamically to a contenteditable div. Whenever user is pressing alphanumeric character, I am appending an empty span element which is used for calculating the position of the caret in contenteditable div.
The problem is that when I type some words like following:
when <
and press a alphanumeric character like b (which calls a function to append a span element), The contenteditable div is showing just when instead of when <b.
When I inspected the element I found the contenteditable div has the following content:
when <b<span class="spanPos"></b<span>
^ strange that span is holding '</b' instead of being empty
Here is a example JSFiddle.
I am not sure how this is happening. Please tell me what should I do to evade this issue.
PS: Here I am trying to add < and >, not HTML elements like <b></b>.
As you said, you're trying to add a symbol which can be interpreted as HTML. You need to escape it or use a different way to express it as an ISO entity:
$('#btnContent').click(function(){
$('#content').html("when <b" + "<span class='spanPos'></span>");
});
http://jsfiddle.net/Dekku/jXeVW/1/
I have visit your code and found there is a <b in JS don't know by are you using that.
Use the below code:
$('#btnContent').click(function(){
$('#content').html("when" + "<span class='spanPos'></span>");
});
By removing the <b tag you will not get this. or You should properly close to it to make the code proper.
EDITED:
After visiting your new code I got the solution you should use the following code:
$('#btnContent').click(function(){
$('#content').html("when <b");
$('#content').html($('#content').html() + "<span class='spanPos'></span>");
});
If you need the details then tell me.
The problem was actually that I was appending a span element to the text whenever the user types something in to the contenteditable div to grab the position of the caret. Something like this
Hello I am he|re
^ Caret position
Then I was adding a span element in between of that text using .html() something like this
Hello I am he<span></span>re
Now whenever I add any letter which represents Html like < or >, then it was merging some of the text inside the span (as I shown above in my post).
So, I solved it by removing it just after when I get the position through span element. I followed the below steps to solve this issue for each letter pressed by the user.
//Store the .text() in a variable.
//Replace Html letters inside the contenteditable div with alphabets which has same width. (for exact positioning).
//add span to the modified text through .html()
//get the offset position of the span
//Do something with that offset position
//Remove span
//Replace the .text() inside the contenteditable div with the text which was stored in a variable.
I did these many things to solve this issue because I was using .text() everywhere else in my project code. If I change it to .html() then I must have rewritten the complete code and might also can't complete the project.
Clearly, I couldn't have done the things which were mentioned in the other answered posts. I hope this will help someone.
