I have an issue with the tag "contenteditable", only in firefox. I want an user to be able to modify the title of a survey he is creating, and the title of the questions which are dynamically created. It works well on IE and Chrome, but on Firefox I can't modify the question title.
Here is what it looks like on chrome : https://gyazo.com/f142c432fcd2994a5f254106d912ff11
and on firefox : https://gyazo.com/5e454710231dc5c957dc46358cf92cf0
The code for the title (which works perfectly fine) is
<h3 id="surveyTitle" class="text_justify fi-page-edit" contenteditable="true">Survey title</h3>
And for the generated questions
var questionDiv = document.createElement("div");
questionDiv.innerHTML = "<div class='large-12 columns mybold fi-page-edit' style='resize: none;' contenteditable='true' id='title"+questionNumber+"'>Question "+questionNumber+"</div> </br>";
var container = document.getElementById("viewForm");
container.appendChild(questionDiv);
container.appendChild(document.createElement("br"));
Maybe it's because "viewForm" is a disabled fieldset :
<form>
<fieldset disabled="disabled" id="viewForm">
</fieldset>
</form>
But since it works on every other browser, I really don't see where is the problem...
Problem solved, it was actually because of the "disabled" tag. Firefox seems to be the only browser which doesn't allow "contentEditable" inside a "disabled" div so I removed it, and now I add it to each anwser input so that the question title is not disabled anymore. (i hope it's clear, sorry if it's not)