-1

I have a contenteditable div with span elements inside.

<div contenteditable="true">
<span>one </span>
<span>two </span>
</div>

whenever I am adding any text beginning of the second span (beginning of two), it's adding to the end first span (after one).

How to place the cursor at beginning and add content

sankar.suda
  • 1,097
  • 3
  • 13
  • 26
  • I'm not entirely sure what the problem is, do you think you could reword your question? This issue isn't happening for me – Jodast Apr 07 '19 at 18:17

1 Answers1

0

Based of what you have said, this is a solution that I can think of. This way both the span elements can be edited seperately. The way you have it set up currently, both span elements are being edited together. The reason behind this is that currently both the elements are encapsulated by the div which is being made editable.

<div>
 <span contenteditable="true">one</span>
 <span contenteditable="true">two</span>
</div>
danesh
  • 39
  • 6
  • If I made span tags editable, the problem is the cursor movement will not work. – sankar.suda Apr 08 '19 at 03:52
  • It seems as though this may have already been answered, check this [link](https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div). The answers explain positioning the caret within the element. – danesh Apr 08 '19 at 20:42