Menu
When you open this page (see Live demo) with Chrome :
<span id="myspan" contenteditable=true></span> CSS :
#myspan { border: 0; outline: 0;} JS :
$(myspan).focus(); the contenteditable span has focus (you can start to write things and you will see that it already had focus), but we don't see the "I" edit cursor.
How to make that this cursor is displayed ? (Remark : outline:0 is needed, as well as the fact that the span is empty even with no white space).
Note : With Firefox, the cursor is displayed.
304
set contenteditable to false and it should work !! that simple. use contenteditable attribute for div to make it editable or not and use readonly attr for form input elements. Save this answer.
To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed. to add a contenteditable div. document. addEventListener("keydown", (event) => { if (event.
After users have made some edits, they can click on the 'Save Changes' button and the changes made can be saved permanently. If the title is editable, we set the contentEditable property on each of the editable elements to false.
All you have to do is set the contenteditable attribute on nearly any HTML element to make it editable. Here's a simple example which creates a <div> element whose contents the user can edit.
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>I added padding to the left and the cursor appears.
#myspan { border: 0; outline: 0; min-width: 100px; height: 30px; padding-left: 1px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
