Why element_variable.style.display = 'inline-block'; causes an extra \n in contentEditable input? For example, if I type:
John
is
Dead.
using Enter key and save it (see the example code below), I will get John\nis\ndead.\n, the last \n was not given by me. If I remove element_variable.style.display = 'inline-block';, the problem disappears.
Why does it happen? Is it a bug? Please explain.
PS: I am using .trim() to solve this problem, but is there any other better solution?
The Code:
<html>
<body>
<h1> Extra \n problem!</h1>
<pre id="obj_1" contentEditable="false"></pre>
</body>
<button onclick="editContents()">Edit</button>
<ul id= "obj_2" contentEditable="false"></li>
<script>
function editContents() {
Text_Array = ["Sam", "John", "Who else?"];index=1;
e_txt= Text_Array[index];
var text_n = document.createElement("pre");
text_n.id = "objl_"+index;
text_n.textContent = e_txt;//
text_n.style.display = 'inline-block';// Problem is here!!
text_n.style.fontSize = '12px';
text_n.style.color = 'blue';
text_n.contentEditable = "true";
obj_2.appendChild(text_n);
var btn = document.getElementById("obj_2");
var button = document.createElement("button");
button.id = index;
button.textContent = "Save (Entry no "+(index+1)+")";
btn.appendChild(button);
button.addEventListener("click", function(){reply_click(parseInt(this.id));}, false);
}// editContents()
function reply_click(index){
Text_Array[index]=document.getElementById("objl_"+index).textContent;
sessionStorage.setItem("Text_Array", JSON.stringify(Text_Array));
document.getElementById("objl_"+index).contentEditable = "false";
var ul = document.getElementById("obj_1");
var li = document.createElement("li");
li.textContent = Text_Array;
ul.appendChild(li); // display after saving
}
</script>
</html>