当点击“输入键盘按钮”时，如何使 <div> 进入 <textarea> 副本以复制换行符？答案

【问题标题】：How do I make <div> into <textarea> copy to copy the line break too when hitting "enter keyboard button"?当点击“输入键盘按钮”时，如何使 <div> 进入 <textarea> 副本以复制换行符？
【发布时间】：2017-03-15 13:34:37
【问题描述】：

当我按下输入键盘按钮时，我如何复制到以复制换行符，以便它是一个精确的副本？现在它可以工作，但是在按下输入键盘按钮时它不会复制换行符。而且我希望它可以像现在一样工作，而不会被剥离。

注意，由于以前的误解，我澄清一下：请不要混淆“将 texatea 复制到 div”，因为这与“将 div 复制到 textarea”不同，因为代码适用于“将 texatea 复制到 div”与“将 div 复制到 textarea”不同。我需要“将 div 放入 textarea”，而不是相反。

我想要：div 变成 text

NOT: text 放入 div

JavaScript：

function copyText() {
  $("#text").val($("#divtext").text())
}

html：

<textarea name="text" id="text" rows="14" cols="54" wrap="soft"></textarea>

【问题讨论】：

stackoverflow.com/questions/18145682/…
你给我看的那个链接是将textarea复制到div中，这个是将div复制到textarea的“相反”。不是一回事。
在我发布之前我已经尝试过你给我的链接。从 div 复制到 textarea 时，Id 无法正常工作。只有在将 textarea 复制到 div 时才能正常工作。

标签： javascript jquery html copy enter

【解决方案1】：

如果您使用.text()，则很难从div 获得换行符，请尝试使用.html()

从div 拆分<br> 并使用\n 加入textarea

$('#text').val($('#divtext').html().split('<br>').join('\n'))

【讨论】：

抱歉，我刚刚注意到了。你的代码不好。它剥离了代码，我不希望它被剥离。
虽然如果我想剥离它是有用的，但它与我想要的不正确。
我不明白你的意思，你的问题是当你按 ENTER 时保持换行符，代码只使用 .split() 和 .join() 将 <br> 转换为 \n - - 不剥离
我重新编写了你的代码并设法让它工作。它只是将 html 默认剥离，然后再次剥离 html，以显示相同的复制结果。我将发布我如何解决问题的答案供其他人查看。
是的，但它也拆分了源代码。这就是问题所在。然而，通过修改您的代码，即使您给我的代码不完整，您也帮助我解决了问题。

【解决方案2】：

你也可以寻找回车键：

<script>
function onTextChange() {
    var key = window.event.keyCode;

    // If the user has pressed enter
    if (key === 13) {
        document.getElementById("text").value = document.getElementById("text").value + "\n*";
        return false;
    }
    else {
        return true;
    }
}
</script>

&lt;div id="yourDiv" onkeypress="onTextChange();"&gt;&lt;/div&gt;

【讨论】：

问题是它确实在新行上给了我“ * ”，但是在复制文本时，我在同一行上得到了文本。我如何结合你给我的这段代码，以便在输入文本时继续在它放“*”的行上？因为现在它唯一正确的做法是将“*”放在一个新行上，但是其余的文本仍然和以前一样在同一行上，并且没有进行任何更改。

【解决方案3】：

工作更新

我使用了我得到的答案中的代码，但我不得不对其进行一些修改以使其正常工作，因为我得到的答案不完整。因为我希望代码被复制但不被剥离，所以需要做的是让它默认剥离，然后再次剥离它，以便在输入源代码时显示为源代码，而不是作为剥离文本。

因此，这是有效的完整答案，以及我如何从我得到的不完整答案中使它发挥作用。此代码有效。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function copyText() {
  $('#text').val($('#divtext').html()
  .split('<br>').join('')
  .split('<div>').join('\n')
  .split('</div>').join('')
  .split('&lt;').join('<')
  .split('&gt;').join('>')
  .split('&nbsp;').join(' ')
  .split('&amp;').join('&')
  )
}
</script>

<div id="divtext" contentEditable="true" wrap="soft" style="text-align:left; width: 499px; height: 230px;" onkeyup="copyText();"></div>
<br>
<textarea id="text" rows="34" cols="134" wrap="soft"></textarea>

【讨论】：