Stack Overflow
Stack Overflow

Questions tagged [contenteditable]

contentEditable is an HTML attribute (invented by Microsoft and standardized in HTML5) that is used for client-side in-browser "rich text" editing.

There are really two attributes involved, designMode and contentEditable. The designMode attribute governs the entire document (i.e. it makes the entire document editable, like a dedicated HTML editor). The contentEditable attribute governs just the element on which it appears, and that element's children -- like a rich text editor control within a page.

Resources

2552 questions
489
votes
22 answers

contenteditable change events

I want to run a function when a user edits the content of a div with contenteditable attribute. What's the equivalent of an onchange event? I'm using jQuery so any solutions that uses jQuery is preferred. Thanks!
Jourkey
  • 33,710
  • 23
  • 62
  • 78
290
votes
13 answers

How to set the caret (cursor) position in a contenteditable element (div)?

I have this simple HTML as an example:
text text text
text text text
text text text
I want simple thing - when I click the button, I want to…
Frodik
  • 14,986
  • 23
  • 90
  • 141
187
votes
18 answers

Get contentEditable caret position

I'm finding tons of good, cross-browser answers on how to set the caret position in a contentEditable element, but none on how to get the caret position in the first place. What I want to do is know the caret position within a div on keyup. So, when…
Bertvan
  • 4,943
  • 5
  • 40
  • 61
187
votes
11 answers

React.js: onChange event for contentEditable

How do I listen to change events for a contentEditable-based control? var Number = React.createClass({ render: function() { return
…
NVI
  • 14,907
  • 16
  • 65
  • 104
182
votes
25 answers

Prevent contenteditable adding

I have a contenteditable element, and whenever I type some stuff and hit ENTER it creates a new
and places the new line text in there. I don't like this one little bit. Is it possible to prevent this from happening or at least just replace it…
iConnor
  • 19,997
  • 14
  • 62
  • 97
153
votes
9 answers

Set cursor position on contentEditable

I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on'
regains focus. It appears default functionality of a content editable div is to move the caret/cursor to…
GONeale
  • 26,302
  • 21
  • 106
  • 149
150
votes
6 answers

Programmatically select text in a contenteditable HTML element?

In JavaScript, it's possible to programmatically select text in an input or textarea element. You can focus an input with ipt.focus(), and then select its contents with ipt.select(). You can even select a specific range with…
callum
  • 34,206
  • 35
  • 106
  • 163
131
votes
4 answers

contenteditable, set caret at the end of the text (cross-browser)

output in Chrome:
hey
what's up?
I believe in FF it would look something like…
user317005
119
votes
9 answers

How to move cursor to end of contenteditable entity

I need to move caret to end of contenteditable node like on Gmail notes widget. I read threads on StackOverflow, but those solutions are based on using inputs and they doesn't work with contenteditable elements.
avsej
  • 3,822
  • 4
  • 26
  • 31
114
votes
3 answers

How do I remove the border around a focused contenteditable pre?

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else. How do I remove that border? Thanks
Christoffer
  • 25,035
  • 18
  • 53
  • 77
102
votes
9 answers

Set focus on div contenteditable element

I have a
where I define by a WYSIWYG some elements. For example

,

, etc. I would like to directly put the focus on one of these elements. For example on

. But it seems that focus() function doesn't…

sanceray3
  • 1,021
  • 2
  • 7
  • 3
86
votes
7 answers

Google Chrome weird cursor blink on pages, never seen 'em before

As I'm paranoid more with online breach, recently noticed that Google chrome elements upon click showing cursor blink and that's spooky. HTML page elements became editable? It's not happening with Mozilla, and the extensions enabled on chrome…
Arun Panneerselvam
  • 2,263
  • 1
  • 17
  • 24
80
votes
4 answers

Insert html at caret in a contenteditable div

I have a div with contenteditable set and I am capturing keypress using jquery to call preventDefault() when the enter key is pressed. Similar to this question which inserts text at the cursor, I would like to directly insert html, for brevity…
Niall
  • 803
  • 1
  • 7
  • 4
77
votes
7 answers

Insert text at cursor in a content editable div

I have a contenteditable div where I need to insert text at the caret position, This can be easily done in IE by document.selection.createRange().text = "banana" Is there a similar way of implementing this in Firefox/Chrome? (I know a solution…
user314362
  • 1,205
  • 2
  • 11
  • 12
72
votes
10 answers

contenteditable single-line input

For an application we're developing at the company where I work, we need an input that supports inserting emoticons inside our JS-based web app. We're currently using an input with the emoticon shortcodes (ie ':-)') and would like to switch to…
Gijs
  • 5,201
  • 1
  • 27
  • 42
1
2 3
…
99 100