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?
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.
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.
Related
In only fire fox the cursor is not hidden when I change the cursor style "pointer" to "none" using java script over you tube Embeded video. I am using a extra div over Iframe to trigger the event to to hide the cursor. When I am inspect the element I see cursor property is none, but in just display its not hidden but work fine in chrome, edge.
This has to do with the document's height not being filled to 100%. As ridiculous as it may seem, some versions of Firefox require this to display certain CSS attributes properly.
See this thread for specifics. Let me know if that helps.
I am about to write a input system for a web application that is a bit more complex. We have Labels in our text that are weather displayed as a bootstrap label (when the contenteditable div is blured) or displayed as handlebars e.g. {{firstname}} when the text is focused.
The changing in states is done by jQueries $().html(content) where I change the content based on the source when I focus the text field.
The problem is: if I click the text, I don't want to need to click a second time to place the cursor, because the text changed. It works as long I don't click inside of a tag but inside the contenteditable root element. but if I click inside of a tag inside the contenteditable, the cursor is not set.
my idea was to get the mouse position when clicking the contenteditable and then set the text cursor to exact that position when I have changed the text. But while I know, how I set the cursor to a specific offset inside a text node, I have no clue how to get this necessary offset when clicking. any ideas?
Edit: Here is the behaviour in a little screencast: https://youtu.be/RZvHxxM6wsQ
Edit2: Here is the problem reproduced on the smallest kind of working example:
https://jsfiddle.net/8z5Lnxef/3/
Internet Explorer is giving layout to my DIVs in TinyMCE.
This means that when a user starts editing all the text in the div is selected, rather than the cursor being inserted in the desired position, and it has editable drag handles:
Screenshot: http://puu.sh/knI67/c5c7250e56.png
Can I add some JQuery to my page, or to the TinyMCE init() to move the cursor to the desired position when the user clicks inside the div?
It's fine in Chrome, Firefox. Latest version of Tiny MCE.
Thanks in advance
I've worked around it by wrapping in a contenteditable=false div, and then adding contenteditable=true to the other divs inside the editor. Seems to work.
I have a content editable div that has pre-existing text. This element is by default set to false (not editable), and on double click I am changing the content editable attribute to true and then focusing on the div element.
This is currently selecting all the pre-existing text inside the content editable div, but I would prefer for the caret to be inserted at the closest text DOM node from the mouse cursor position when the double click event fired.
Needing only to support webkit, and having jQuery as a tool if needed, what is the most straight forward way to do this?
If you only need to support chrome you can use document.caretRangeFromPoint
Let's say I have a set of contenteditable="true" divs.
<div id="0" contenteditable="true"></div>
<div id="1" contenteditable..></div>
<div...etc></div>
I can't have one div, multiple divs is a must. How could I highlight the content of more than one div? Using ranges? Anything else?
The answer is that it depends on the browser. See this example for a test of two methods using Ranges. The first attempts to create a Range per editable <div> and add all of them to the selection. The second attempts to create a single Range encompassing the contents of two editable <div>s.
Results:
In all browsers, it is impossible for the user to create a selection that lives in more than one editable element;
Firefox is the most permissive of the major browsers. Both programmatic methods work.
Safari and Chrome is the least permissive: neither method selects content from more than one editable element.
Opera 11 does not support multiple Ranges in the selection, but does support a selected Range spanning more than one editable element.
IE pre-version 9 does not support DOM Range or the same Selection API as other browsers, but the equivalent TextRange code does not allow selection from more than one editable element.
It is possible to switch the divs to contenteditable="false" on the fly as a consequence of starting a selection in one of them. Something like this gives you the idea (using JQuery):
$('div').bind("selectstart", function() {
$('div').attr("contenteditable", false);
});
Here's a fiddle to demonstrate (only tested in Chrome).
Note in the fiddle example that the first ContentEditable Div gets the focus. This allows you to type away as normal, but as soon as you select anything, using mouse or keyboard, you'll see you can extend the selection across divs as usual.
This obviously needs fleshing out to work with multiple browsers and to turn back to contenteditable="true" appropriately. But I think the approach is valid.