Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

How do I listen to change events for a contentEditable -based control?

var Number = React.createClass({
    render: function() {
        return <div>
            <span contentEditable={true} onChange={this.onChange}>
                {this.state.value}
            </span>
            {this.state.value}
        </div>;
    onChange: function(v) {
        // Doesn't fire :(
        console.log('changed', v);
    getInitialState: function() {
        return {value: '123'}
React.renderComponent(<Number />, document.body);

Code on JSFiddle.

Having struggled with this myself, and having issues with suggested answers, I decided to make it uncontrolled instead. That is, I put initialValue into state and use it in render, but I don't let React update it further. – Dan Abramov Oct 2, 2014 at 17:30 I avoided struggling with contentEditable by changing my approach - instead of a span or paragraph, I've used an input along with its readonly attribute. – ovidiu-miu Sep 8, 2019 at 11:20 contentEditable='true' onInput={e => console.log('Text inside div', e.currentTarget.textContent)} Text inside div This solution will strip out all the markup and give you just the text content defeating the reason why the content editable div is used. Rather use innerHTML i.e onInput={(e) =>console.log("Text inside div", e.currentTarget.innerHTML) } – Ufenei augustine Feb 3, 2021 at 23:35 This works but as @JuntaeKim suggested, the caret always stays at the beginning and does not change it's position. Any ideas on how to change position of caret? – Umang May 12, 2021 at 7:28 @Umang Is react updating the state within the div? If you modify state from the div and then the div is updated based on that state, it replaced the DOM element (I believe) which removes the caret. You'll need to find a way to avoid having react insert state into the div. I just made my own functions to manage state outside of react – BobtheMagicMoose May 28, 2021 at 1:03 This works great if you need an uncontrolled component. It doesn't work well for controlled situations, as others have mentioned, but React also discourages this with a warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional. – ericgio Jul 20, 2021 at 5:59

See Sebastien Lorber's answer which fixes a bug in my implementation.

Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events.

I'd personally have this as my render function.

var handleChange = function(event){
    this.setState({html: event.target.value});
}.bind(this);
return (<ContentEditable html={this.state.html} onChange={handleChange} />);

jsbin

Which uses this simple wrapper around contentEditable.

var ContentEditable = React.createClass({
    render: function(){
        return <div
            onInput={this.emitChange}
            onBlur={this.emitChange}
            contentEditable
            dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
    shouldComponentUpdate: function(nextProps){
        return nextProps.html !== this.getDOMNode().innerHTML;
    emitChange: function(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html
        this.lastHtml = html;
                @NVI, it's the shouldComponentUpdate method.  It'll only jump if the html prop is out of sync with the actual html in the element.  e.g. if you did this.setState({html: "something not in the editable div"}})
– Brigand
                Mar 27, 2014 at 6:21
                nice but I guess the call to this.getDOMNode().innerHTML in shouldComponentUpdate is not very optimized right
– Sebastien Lorber
                Jun 28, 2014 at 14:01
                @SebastienLorber not very optimized, but I'm pretty sure it's better to read the html, than to set it.  The only other option I can think of is to listen to all events that could change the html, and when those happen you cache the html.  That'd probably be faster most of the time, but add a lot of complexity.  This is the very sure and simple solution.
– Brigand
                Jun 28, 2014 at 15:58
                This is actually slightly flawed when you want to set state.html to the last "known" value, React will not update the DOM because the new html is exactly the same as far as React is concerned (even though the actual DOM is different). See jsfiddle. I have not found a good solution for this, so any ideas are welcome.
– univerio
                Jun 29, 2014 at 0:46

Someone has made a project on NPM with my solution: react-contenteditable

I've encountered another problem that occurs when the browser tries to "reformat" the HTML you just gave it, leading to component always rerendering. See this.

Here's my production contentEditable implementation. It has some additional options over react-contenteditable that you might want, including:

  • locking
  • imperative API allowing to embed HTML fragments
  • ability to reformat the content
  • Summary:

    FakeRainBrigand's solution has worked quite fine for me for some time until I got new problems. ContentEditables are a pain, and are not really easy to deal with React...

    This JSFiddle demonstrates the problem.

    As you can see, when you type some characters and click on Clear, the content is not cleared. This is because we try to reset the contenteditable to the last known virtual DOM value.

    So it seems that:

  • You need shouldComponentUpdate to prevent caret position jumps
  • You can't rely on React's VDOM diffing algorithm if you use shouldComponentUpdate this way.
  • So you need an extra line, so that whenever shouldComponentUpdate returns 'yes', you are sure the DOM content is actually updated.

    So the version here adds a componentDidUpdate and becomes:

    var ContentEditable = React.createClass({
        render: function(){
            return <div id="contenteditable"
                onInput={this.emitChange}
                onBlur={this.emitChange}
                contentEditable
                dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
        shouldComponentUpdate: function(nextProps){
            return nextProps.html !== this.getDOMNode().innerHTML;
        componentDidUpdate: function() {
            if (this.props.html !== this.getDOMNode().innerHTML) {
               this.getDOMNode().innerHTML = this.props.html;
        emitChange: function() {
            var html = this.getDOMNode().innerHTML;
            if (this.props.onChange && html !== this.lastHtml) {
                this.props.onChange({
                    target: {
                        value: html
            this.lastHtml = html;
    

    The virtual DOM stays outdated, and it may not be the most efficient code, but at least it does work :) My bug is resolved

    Details:

  • If you put shouldComponentUpdate to avoid caret jumps, then the contenteditable never rerenders (at least on keystrokes)

  • If the component never rerenders on key stroke, then React keeps an outdated virtual DOM for this contenteditable.

  • If React keeps an outdated version of the contenteditable in its virtual DOM tree, then if you try to reset the contenteditable to the value outdated in the virtual DOM, then during the virtual DOM diff, React will compute that there are no changes to apply to the DOM!

    This happens mostly when:

  • you have an empty contenteditable initially (shouldComponentUpdate=true,prop="",previous vdom=N/A),
  • the user types some text and you prevent renderings (shouldComponentUpdate=false,prop=text,previous vdom="")
  • after user clicks a validation button, you want to empty that field (shouldComponentUpdate=false,prop="",previous vdom="")
  • as both the newly produced and old virtual DOM are "", React does not touch the DOM.
  • I've implemented keyPress version that alert the text when enter key is pressed. jsfiddle.net/kb3gN/11378 – Luca Colonnello Jun 11, 2015 at 12:31 @LucaColonnello you'd better use {...this.props} so that the client can customize this behavior from the outside – Sebastien Lorber Jun 11, 2015 at 12:49 @kmoe because the component never updates if the contentEditable already has the appropriate text (ie on keystroke). Updating the contentEditable with React makes the caret jump. Try without contentEditable and see yourself ;) – Sebastien Lorber Aug 19, 2015 at 13:09

    Since, when the edit is complete the focus from the element is always lost, you could simply use an onBlur event handler.

    onBlur={e => { console.log(e.currentTarget.textContent); contentEditable suppressContentEditableWarning={true} <p>Lorem ipsum dolor.</p> This answers just a single scenario. There is still a need to act upon content change (for example, update custom scrollbars while typing) – vsync Jun 7, 2022 at 14:28

    This probably isn't exactly the answer you're looking for, but having struggled with this myself and having issues with suggested answers, I decided to make it uncontrolled instead.

    When editable prop is false, I use text prop as is, but when it is true, I switch to editing mode in which text has no effect (but at least browser doesn't freak out). During this time onChange are fired by the control. Finally, when I change editable back to false, it fills HTML with whatever was passed in text:

    /** @jsx React.DOM */
    'use strict';
    var React = require('react'),
        escapeTextForBrowser = require('react/lib/escapeTextForBrowser'),
        { PropTypes } = React;
    var UncontrolledContentEditable = React.createClass({
      propTypes: {
        component: PropTypes.func,
        onChange: PropTypes.func.isRequired,
        text: PropTypes.string,
        placeholder: PropTypes.string,
        editable: PropTypes.bool
      getDefaultProps() {
        return {
          component: React.DOM.div,
          editable: false
      getInitialState() {
        return {
          initialText: this.props.text
      componentWillReceiveProps(nextProps) {
        if (nextProps.editable && !this.props.editable) {
          this.setState({
            initialText: nextProps.text
      componentWillUpdate(nextProps) {
        if (!nextProps.editable && this.props.editable) {
          this.getDOMNode().innerHTML = escapeTextForBrowser(this.state.initialText);
      render() {
        var html = escapeTextForBrowser(this.props.editable ?
          this.state.initialText :
          this.props.text
        return (
          <this.props.component onInput={this.handleChange}
                                onBlur={this.handleChange}
                                contentEditable={this.props.editable}
                                dangerouslySetInnerHTML={{__html: html}} />
      handleChange(e) {
        if (!e.target.textContent.trim().length) {
          e.target.innerHTML = '';
        this.props.onChange(e);
    module.exports = UncontrolledContentEditable;
                    @NVI: I need safety from injection, so putting HTML as is is not an option. If I don't put HTML and use textContent, I get all sorts of browser inconsistencies and can't implement shouldComponentUpdate so easily so even it doesn't save me from caret jumps anymore. Finally, I have CSS pseudo-element :empty:before placeholders but this shouldComponentUpdate implementation prevented FF and Safari from cleaning up the field when it is cleared by user. Took me 5 hours to realize I can sidestep all these problems with uncontrolled CE.
    – Dan Abramov
                    Oct 2, 2014 at 18:47
                    I don’t quite understand how it works. You never change editable in UncontrolledContentEditable. Could you provide a runnable example?
    – NVI
                    Oct 2, 2014 at 18:54
                    @NVI: It's a bit hard since I use a React internal module here.. Basically I set editable from outside. Think a field that can be edited inline when user presses “Edit” and should be again readonly when user presses “Save” or “Cancel”. So when it is readonly, I use props, but I stop looking at them whenever I enter “edit mode” and only look at props again when I exit it.
    – Dan Abramov
                    Oct 2, 2014 at 18:57
                    For whom you are going to use this code, React has renamed escapeTextForBrowser to escapeTextContentForBrowser.
    – wuct
                    Jun 17, 2015 at 6:17
    

    I suggest using a MutationObserver to do this. It gives you a lot more control over what is going on. It also gives you more details on how the browse interprets all the keystrokes.

    Here in TypeScript:

    import * as React from 'react';
    export default class Editor extends React.Component {
        private _root: HTMLDivElement; // Ref to the editable div
        private _mutationObserver: MutationObserver; // Modifications observer
        private _innerTextBuffer: string; // Stores the last printed value
        public componentDidMount() {
            this._root.contentEditable = "true";
            this._mutationObserver = new MutationObserver(this.onContentChange);
            this._mutationObserver.observe(this._root, {
                childList: true, // To check for new lines
                subtree: true, // To check for nested elements
                characterData: true // To check for text modifications
        public render() {
            return (
                <div ref={this.onRootRef}>
                    Modify the text here ...
        private onContentChange: MutationCallback = (mutations: MutationRecord[]) => {
            mutations.forEach(() => {
                // Get the text from the editable div
                // (Use innerHTML to get the HTML)
                const {innerText} = this._root;
                // Content changed will be triggered several times for one key stroke
                if (!this._innerTextBuffer || this._innerTextBuffer !== innerText) {
                    console.log(innerText); // Call this.setState or this.props.onChange here
                    this._innerTextBuffer = innerText;
        private onRootRef = (elt: HTMLDivElement) => {
            this._root = elt;
    

    Here is a component that incorporates much of this by lovasoa: https://github.com/lovasoa/react-contenteditable/blob/master/index.js

    He shims the event in the emitChange

    emitChange: function(evt){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            evt.target = { value: html };
            this.props.onChange(evt);
        this.lastHtml = html;
    

    I'm using a similar approach successfully

    The author has credited my SO answer in package.json. This is almost the same code that I posted and I confirm this code works for me. github.com/lovasoa/react-contenteditable/blob/master/… – Sebastien Lorber Apr 15, 2015 at 13:31 spellCheck="false" onInput={e => console.log("e: ", e.currentTarget.textContent} contentEditable="true" suppressContentEditableWarning={true} placeholder="Title" className="new-post-title" An explanation would be in order. E.g., what is the idea/gist? What was it tested on (browser, operating system), incl. versions (incl. React). From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (****************************** without *********************** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Peter Mortensen Sep 16, 2022 at 16:17

    Here's my hooks-based version based on Sebastien Lorber's answer:

    const noop = () => {};
    const ContentEditable = ({
      html,
      onChange = noop,
      html: string;
      onChange?: (s: string) => any;
    }) => {
      const ref = useRef<HTMLDivElement>(null);
      const lastHtml = useRef<string>('');
      const emitChange = () => {
        const curHtml = ref.current?.innerHTML || '';
        if (curHtml !== lastHtml.current) {
          onChange(curHtml);
        lastHtml.current = html;
      useEffect(() => {
        if (!ref.current) return;
        if (ref.current.innerHTML === html) return;
        ref.current.innerHTML = html;
      }, [html]);
      return (
          onInput={emitChange}
          contentEditable
          dangerouslySetInnerHTML={{ __html: html }}
          ref={ref}
    

    It's working perfectly until I've tried to set this value in state. When I'm using a functional component that calls setState(e.currentTarget.textContent), I'm getting currentTarget as null. setState works asynchronously and currentTarget is not available there.

    The fix that worked for me in React 17.0.2 was to use e.target.innerText:

    onBlur={e => setState(e.target.innerText)} contentEditable suppressContentEditableWarning={true} <p>Lorem ipsum dolor.</p> How about using the original approach but storing e.currentTarget.textContent in a string variable, e.g. const {textContent} = e.currentTarget, then use that variable to set state? This won't go stale as the object property might. – ggorlen Dec 11, 2021 at 21:17 Expect method to have been called is not fulfilled on "onInput" for a contentEditable element See more linked questions