0

I have some html as follows (for IE9):

<div contenteditable="true">
   Some editable text
   <span class="code" contenteditable="true" unselectable="on">uneditable text</span>
   more editable text
</div>

In IE9 the span contenteditable must be set to "true" to make the span uneditable and in Chrome it is set to "false" to make the span uneditable!!

However, in IE9 when the mouse goes over the span the cursor appears as the move cursor (crossed arrows). The cursor is set in my css file to be 'pointer', but this is not working for IE9.

How can I change the cursor to be a hand or an arrow in IE9?

KennyE
  • 513
  • 6
  • 15
  • The attribute name `contententeditable` here is just a typo in the code posted here, right? Your real code has the correct name `contenteditable`, right? If yes, please edit the question. – Jukka K. Korpela Nov 20 '14 at 22:53

2 Answers2

0

The following works for me fine on both IE9 and Chrome 38, the content of the span is editable and the text outside of the span is not editable. The cursor is also the same typing cursor that you would expect when you hover over any text.

The only diffrence i noticed is that on Chrome the span is highlighted in blue when in edit mode.

<div>
Some NOT editable text
<span class="code" contenteditable="true">EDITABLE text</span>
more NOT editable text
</div>

HTML5 Validation on Visual Stidio IDE for example will tel you that contententeditable is not a valid attribute of element div and unselectable is also not a valid attribute of element span.

If you are still having issues with the cursor, please post your CSS.

samiup
  • 304
  • 2
  • 6
0

Making a child of an editable element non-editable is a messy business, with bugs and incompatibilities between browser versions; see e.g. contenteditable=false inside contenteditable=true block is still editable in IE8 and HTML contenteditable with non-editable islands

But you have apparently found the workaround (for IE) of using the nonstandard attribute unselectable=on. By making the element unselectable, it also makes it non-editable because there is no way getting at editing it. It is this attribute that matters here to IE, and you should use the logical contenteditable=false to cover other browsers. This will make the cursor a text cursor, which is less confusing than what you have now. It might be said to be misleading, but IE apparently IE wants to use text cursor for editable elements and their children (though the illogical combination contenteditable=true unselectable=on seems to cause a move cursor). After all, it is editable, including the non-editable island in the sense that the island as a whole can be removed or replaced. Anyway, in such issues IE ignores cursor property settings in CSS.

Community
  • 1
  • 1
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • I have found that in IE9 you need both unselectable="on" and contenteditable="true" to ensure the span cannot be edited. unselectable="on" stops the mouse selecting the span and placing the cursor within it. But if you are in the outer div editing something you can use the arrow keys and navigate into the span and then edit it if contenteditable is set to false in IE. I was hoping there was a way to change the cursor when contenteditable="true" and unselectable="on". – KennyE Nov 21 '14 at 11:49