如何获取 <pre> 标记的值并保留所有空格？

Question

我正在使用<pre> 标记来保留空格和换行符。我在<pre> 标签内使用contenteditable="true"，以便用户可以编辑数据。 我想在保留用户输入的同时将用户编辑的数据存储在 JavaScript 中的变量中，但我不太确定该怎么做。任何帮助或建议将不胜感激。谢谢！

XSL

<pre contenteditable="true"><xsl:value-of select="$txn_desc"/></pre>

Answer 1

如果您想获取标签内的标记，请使用.innerHTML，如果您只需要文本，请使用.textContent。

const pre = document.querySelector("pre");//get the tag
const text = pre.textContent;
const html = pre.innerHTML;

为了防止 HTML 被插入到 contenteditable 元素中，您可以为 keydown 添加一个事件监听器，并在按下 enter 键时插入“\n”。

pre.addEventListener("keydown", function(e){
    if(e.keyCode===13){
     document.execCommand('insertHTML', false, '\n');
     e.preventDefault();
  }
});

演示：

const pre = document.querySelector('pre');
document.querySelector('button').addEventListener("click", function(e){
    alert(pre.textContent);
});
pre.addEventListener("keydown", function(e){
    if(e.keyCode===13){
     document.execCommand('insertHTML', false, '\n');
     e.preventDefault();
  }
});

<pre contenteditable style="border: 1px solid goldenrod;">
Text inside 
  
that is multi
line!
!
  
  !
</pre>
<button>
Get text
</button>