如果文本已经输入，JavaScript 不会复制 innerHTML

Posted 2023-05-07

【中文标题】如果文本已经输入，JavaScript 不会复制 innerHTML

【英文标题】：JavaScript doesn't copy innerHTML if text already entered

【发布时间】：2019-03-28 05:16:58

【问题描述】：

当用户单击按钮以将 div 中的一系列段落中的文本复制到文本区域输入字段中时，我正在运行以下代码。当文本区域为空时，代码可以正常工作并将段落文本粘贴到字段中。如果我再次按下按钮，它也会重复该功能，将段落文本附加到先前粘贴的文本中。

但是，如果我在文本字段中手动输入任何内容，然后单击按钮，它就不起作用了。

function copyDiv() 
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerhtml;
  for (i = 1; i < x.length; i++) 
    firstDivContent = firstDivContent + x[i].innerHTML;
  
  var secondDivContent = document.getElementById('comment');
  firstDivContent = firstDivContent + " " + secondDivContent.innerHTML;
  secondDivContent.innerHTML = firstDivContent;

对应的HTML如下：

<div class="entry themeform" id="post-caption">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>
<input name="submit" type="submit" id="submit" class="submit" value="Send Feedback">
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">&nbsp;</textarea></p>
<input name="copy-text" id="copy-text" class="submit copy-text" value="Copy caption text" onClick="copyDiv();">

非常感谢任何帮助。

【问题讨论】：

你能分享你的html吗？

能否提供相应的 HTML 以便我们实际运行测试？它不需要是完整的 HTML，只需 Minimal, Complete, and Verifiable example

把它放在一个小提琴里：jsfiddle.net

@mats 我很欣赏这个想法，但把它放在一个 sn-p 中会更合适，所以我们不需要依赖第三方网站。

这段代码似乎没有读取或写入任何文本区域。如果是<textarea id="comment">，请使用.value，而不是.innerHTML。如果是contenteditable 元素，edit 你的帖子并澄清。请参阅javascript get TextArea input via .value or .innerHTML? 及其相关问题。

【参考方案1】：

在获取/设置其内容时，Textareas 的行为与 div 不同。你想要$textarea.value，而不是$textarea.innerHTML。看看这个帖子JavaScript get TextArea input via .value or .innerHTML?

function copyDiv() 
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerHTML;
  for (i = 1; i < x.length; i++) 
    firstDivContent = firstDivContent + x[i].innerHTML;
  
  var secondDivContent = document.getElementById('comment');
  var newContent = firstDivContent + " " + secondDivContent.value;
  secondDivContent.value = newContent;

<button onClick="copyDiv()">Copy</button>

<div id="post-caption">
  <p>this is the first</p>
  <p>this is the second</p>
  <p>this is the third</p>
</div>

<textarea id="comment">This is a comment</textarea>

【讨论】：

澄清一下，您可以设置以下三种重要元素的内容：<div>s（和其他“常规”元素）有.innerHTML 以反映其当前内容； <textarea> 有.value 用于他们当前的内容，但也有.innerHTML 来获取/设置他们的initial 内容。还有 <input>（任何类似文本的类型），其当前内容的 .value 属性和用于获取/设置其 default 内容的 value 属性（使用setAttribute 或getAttribute)。

【参考方案2】：

使用value 而不是innerHTML 来访问textarea。

（你也可以使用document.querySelectorAll('#post-caption p');）

const button = document.querySelector('button');
button.addEventListener('click', copyDiv, false);

function copyDiv() 
  var x = document.getElementById('post-caption').getElementsByTagName('p');
  var i;
  var firstDivContent = x[0].innerHTML;
  for (i = 1; i < x.length; i++) 
    firstDivContent = firstDivContent + x[i].innerHTML;
  
  var secondDivContent = document.getElementById('comment');
  firstDivContent = firstDivContent + " " + secondDivContent.value;
  secondDivContent.value = firstDivContent;

<div id="post-caption">
  <p>Hallo</p>
  <p>Test</p>
  <p>This</p>
</div>
<textarea id="comment"></textarea>
<button>Click</button>