The problem is that spans are inline elements. Just add display:block; to your CSS and it will fix the problem. $(myspan).focus(); #myspan { border: 0; outline: 0; display: block; } <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script> <span id=”myspan” contenteditable=true></span>
Geowa4’s solution will work for a textarea, but not for a contenteditable element. This solution is for moving the caret to the end of a contenteditable element. It should work in all browsers which support contenteditable. function setEndOfContenteditable(contentEditableElement) { var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range … Read more
There is a way but you need to pro-actively set a few styles. The idea is to tell Chrome that the styles are already taken care of, so it doesn’t need to add SPAN to meet the styles requirement. basically, you need to add the chrome added styles to a span class under your contenteditable … Read more
First of all… Don’t try to make your own WYSIWYG editor if you’re thinking about commercial use. It’s a cool idea for a personal project, because you can learn a lot, but it will take you years to create editor that you will be able to sell to someone that cares about if it really … Read more
I spent on this a lot of time myself, when trying to completely hide control selections (this is how they are called) in CKEditor’s widgets. Unfortunately I don’t have a good news. Solution 1 First of all, there’s a mscontrolselect event. When I found it (and the fact that its name has an ms prefix) … Read more
UPDATE: All major browsers now give you access to the clipboard data in a paste event. See Nico Burns’s answer for an example on newer browser and also check out Tim Down’s answer if you need to support older browsers. You can listen for the onPaste event on the div to detect the paste. If … Read more
Okay, I already have discovered the answer much like how Penicillin was discovered. You see, playing around with this code, I mistakenly set contenteditable to true for the span and voila! It worked! So, to make a span NON-contenteditable inside a contenteditable div, you just set its contenteditable attribute to true! <div contenteditable=”true”> Luke, I … Read more
Most people would argue that contentEditable defines behaviour, rather than style (which is true). WebKit has a CSS property that is similar to contentEditable: -webkit-user-modify.
Try this, it returns the selected text, no matter if it’s contentEditable or not. function GetSelectedText() { if (document.getSelection) { // all browsers, except IE before version 9 var sel = document.getSelection(); // sel is a string in Firefox and Opera, // and a selectionRange object in Google Chrome, Safari and IE from version 9 … Read more