Search code examples
javascripthtmlfirefoxcontenteditableonblur

Value of an html element edited

Why this code does not work in Firefox? The goal is to get the edited value when the element loses focus

out = document.getElementById('out');
edit = function(e) {
  var element = e;
  element.contentEditable = true;
  element.onblur = function(blur) {
    console.log(element.innerText);
    out.innerText = element.innerText;
  };
};
span {
  background-color: cyan;
}
#out {
  background-color: yellow;
  padding: 0.5em;
}
<span ondblclick="edit(this)" data-foo="foo" data-bar="bar">
    double-click and edit-me</span>

<p></p>
<span id="out"></span>

Solution

  • Firefox doesn't support .innerText. You should use the W3 standard .textContent instead.

    This will work in all modern browsers and can be patched into IE8 if needed.