Por qué element_variable.style.display = 'inline-block'; provoca un \n adicional en la entrada contentEditable ? Por ejemplo, si escribo:
John is Dead. usando la tecla Enter y guárdelo (vea el código de ejemplo a continuación), obtendré John\nis\ndead.\n , el último \n no fue proporcionado por mí. Si element_variable.style.display = 'inline-block'; , el problema desaparece.
¿Por que sucede? ¿Es un error? Por favor explique.
PD: estoy usando .trim() para resolver este problema, pero ¿hay alguna otra solución mejor?
El código:
<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>