Content Editable Div becomes readonly after adjusting innerHTML from keystroke?

Question

Can anyone shed some light on this issue? For some reason the editable div is uneditable after it fires syntax update. I've tried on Opera, Chrome and Firefox on XP and Win7 and they all report the same behaviour. I'm thinking it might be some kind of race condition but I have no idea how I would prevent that sort of thing.

<html>
  <head>
  </head>
  <body>
<div id="code_editor" contenteditable="true" style="border: 1px solid black;">
Content Editable Div Right here
</div>
<script>
//Add listener
document.getElementById('code_editor').addEventListener('input', keypress , false);

//Update the syntax
function syntax_update()
{
  document.getElementById('code_editor').innerHTML = 'Are you able to edit the text still?';
}

//Deal with keypress
function keypress(e)
{
  syntax_update();
}
</script>
  </body>
</html>

Answer 1

You can still edit it. It's just that it always replaces the innerHTML with the same thing which makes it look like it's not changing.

 //Add listener document.getElementById('code_editor').addEventListener('input', keypress , false); var i = 0; //Update the syntax function syntax_update() { document.getElementById('code_editor').innerHTML = 'Are you able to edit the text still? Ticker: ' + ++i; } //Deal with keypress function keypress(e) { syntax_update(); }

 <div id="code_editor" contenteditable="true" style="border: 1px solid black;"> Content Editable Div Right here </div>

Content Editable Div becomes readonly after adjusting innerHTML from keystroke?

Question

1 answers

solution1
2 ACCPTED 2016-04-12 21:29:21

Content Editable Div becomes readonly after adjusting innerHTML from keystroke?

Question

1 answers

solution1 2 ACCPTED 2016-04-12 21:29:21

solution1
2 ACCPTED 2016-04-12 21:29:21