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

Posted 2023-02-16

【中文标题】如何获取 <pre> 标记的值并保留所有空格？

【英文标题】：How to get value of <pre> tag and preserve all the white spaces?

【发布时间】：2020-10-29 14:20:15

【问题描述】：

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

XSL

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

【参考方案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>

【讨论】：

感谢您的回答，但我已经尝试过了，新行没有保留在 JS var 中...

你能提供一个可重现的例子吗？

因为我要做的是将值从一个屏幕传递到另一个屏幕，这就是为什么我使用<xsl:value-of> 来提取节点的值以便用户可以修改数据，所以我将无法提供适当的可重现示例，但您能否建议一些代码，将所有内容包装在 JS 或 jQuery 中的 pre 标记内，同时保留空格和换行符？谢谢

这就像每次我添加一个空格时都会添加一个新的 ，而当我添加一个新行时它会添加一个新的 跨度>

我正在使用<li><input tabindex="6" id="Button5" value="Confirm" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();"/></li> 调用我的函数。在函数fnOnSubmit 中，我正在编写我所有的JS 代码。但是pre.addEventListener 没有被调用？