2

I have an editable div. The content of that div looks e.g. like that:

This is a <ins>new</ins> chapter.

(The tags are not visible, they are for styling) If you set the text cursor in front of the "new" everything is fine. But if you set the text cursor behind the "new", the cursor is inside the < ins >-tag and new typed text is also inside the tag:

This is a <ins>new and very interesting</ins> chapter.

But it should look like that:

This is a <ins>new</ins> and very interesting chapter.

How can I set the text cursor behind the tag and prevent that new text is written inside the tag?

Fauphi
  • 340
  • 1
  • 2
  • 11
  • This is a usability problem. On the other hand if someone will try to write something after "new" but inside the he must write here: ne...w, delete last w, and write it back after "ne". So I think this is alright. I will think about how too ommit it. And could You please write the application of this 'hack'? – Jacek Kowalewski Jan 23 '14 at 13:24
  • No, thats not a usability problem. The user isn't allowed to write inside the -tag. The textbox is connected with a algorithm that checks for new and deleted words. But the problem here is to prevent the text-cursor from getting set inside the tag. – Fauphi Jan 23 '14 at 20:04
  • +1 for interesting problem. A little help from me below. Hope it helps, if You have any questions feel free to write. Best regards. – Jacek Kowalewski Jan 24 '14 at 06:58

1 Answers1

0

OK. The first idea was to made the

<ins contenteditable="false">new</ins>

Inside the contenteditable="true" element. Further reading (contenteditable=false inside contenteditable=true block is still editable in IE8) tells that this is not as always interpreted good in IE. In this post there is a hack answer (https://stackoverflow.com/a/7522910/1125465) but I really do not agree. It is just a mistake which will probably be repaired in the next versions of browsers.

Next I followed this link (HTML contenteditable with non-editable islands) and I haven;t got good news. There is no way of blocking the ins tag from editing so simple. First of all a little note:

If this isn't an additional functionality You must be sure it works as it should. As You wrote The user isn't allowed to write inside the -tag, so all the options:

  • working in almost every browser...
  • working with a little bug...
  • working but if someone...

must be rejected. So if someone turns the javascript off, it should work too. In that case I've come to the first conclusion (as always): server side verification MUST BE DONE. This will prevent the user from destroying Your database and doing things he can't.

After server side verifying (and showing notification if something is wrong of course) it is going to be additional functionality. So we should do all we can now, to make it work (but now there is no obligation).

NICE LECTURE :) https://stackoverflow.com/a/7232871/1125465 http://jsfiddle.net/X6Ab8/

**SOLUTION **

I propose something like... I know this sounds a little bit more like old days with milion tags, but really this will work and will be great. Make an additional span element between the ins elements (for example using php:

$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);

Make this span editable, and only this span editable (not the block container). That's all. Solution is simple, clean, much more efficient and almost 100% safe. And nice...

ADDITIONAL SAFETY when using javascript hacks

If You need it to be done fully with javascript (maybe someone has idea how?), for total safety I would propose additionaly something like this:

  1. Add data-noneditable-id="id" to each non editable element inside the main block editable container. Now every non editable element has it own unique id (can be done using jQuery for example using selector $("div#editable ins")).
  2. Run a javascript that will run through all the objects that has attribute "data-noneditable-id" and save their innerHTML in array (for example: 1 => 'new', 2=> 'added', 3=> 'inserted', ...).
  3. Now if someone edit any of them, You can easily repair them.

PS. This should also help a little... (https://stackoverflow.com/a/4979828/1125465).

Hope it helps! Best regards.

Community
  • 1
  • 1
Jacek Kowalewski
  • 2,551
  • 2
  • 19
  • 33