Question

将文本从 div innerHtml 复制到 textarea

2018-10-05

1789

javascript jquery html iframe selector

与此问题相关的一个问题与 iframe 问题有关：将 div 从父网站复制到 iframe 中的文本区域

我正在尝试将 InnerHtml 从 div 复制到 TextArea。我在同一个网页上创建了两个谷歌翻译实例，并尝试将第一个实例的自动更正应用到第二个实例，而不更改第一个 textarea 。

我尝试了不同的代码：

setInterval(function() {
childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
$("#source")[1].val(childAnchors1.text());
 }, 100);

setInterval(function copyText() {
    $(".goog-textarea short_text")[1].val($("#spelling-correction > a")[0].innerText());
}
, 100);

setInterval(function copyText() {
    $("#source")[1].val($("#spelling-correction > a")[0].innertext());
}
, 100);

setInterval(function() {
 var finalarea = document.getElementsByClassName("goog-textarea short_text")[1];
var correction = document.querySelectorAll("#spelling-correction > a")[0].innerHTML
  document.getElementsByClassName("goog-textarea short_text")[1].value = correction.innerText;
}, 100);

onclick='document.getElementsByClassName("goog-textarea short_text")[1].innerHTML=document.getElementById("spelling-correction > a")[0].innerHTML;'

但不幸的是，这些似乎都不起作用……

我将非常感激任何帮助。

我应该提到这一点。我使用 iframe 创建了第二个实例，因此简单的解决方案不起作用... 这是我用于创建 iframe 实例的代码：

var makediv = document.createElement("secondinstance");
makediv.innerHTML = '<iframe id="iframenaturalID" width="1500" height="300" src="https://translate.google.com"></iframe>';
makediv.setAttribute("id", "iframeID");
var NewTranslator = document.getElementById("secondinstance");
var getRef = document.getElementById("gt-c");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);

我尝试使用它在 iframe 和父网站之间进行通信：

setInterval(function() {
    var childAnchors1 = window.parent.document.querySelectorAll("#spelling-correction > a");
    var TheiFrameInstance = document.getElementById("iframeID");
    TheiFrameInstance.contentWindow.document.querySelectorAll("#source").value = childAnchors1.textContent;
}, 100);

但是它不起作用...

好的，我让它工作了：

var a = document.createElement('iframe');
a.src = "https://translate.google.com"; 
a.id = "iframenaturalID";
a.width = "1000";
a.height = "500";
document.querySelector('body').appendChild(a)

和

let iframe = document.getElementById("iframenaturalID");
setInterval(function() {
let source = iframe.contentWindow.document.getElementById("source");
let destination = window.parent.document.querySelector("#spelling-correction > a");


source.value = destination.textContent;
     }, 100);

现在它完成了我尝试做的事情，但是我仍然收到错误消息： Uncaught TypeError: Cannot set property 'value' of null at eval ，它指向此行： source.value = destination.textContent; 。虽然这不是什么大问题，但它返回这个错误仍然很奇怪...

好的，我可以通过添加 setTimeout 来解决这个问题。

Answer 1

由于 textarea 是表单元素，因此 .innerText 和 .innerHTML 均不起作用。您需要使用 value 属性（或使用 JQuery 的 .val() ）提取其内容。

仅供参考：

它是 innerText ，而不是 .innertext 。
.innerText 是一个属性，而不是一个函数，因此您不要在它后面使用 () 。
它是 .innerHTML ，而不是 .innerHtml 。
innerHTML 用于字符串中应解析为 HTML 的 HTML，而 .textContent 用于不应解析为 HTML 的字符串。通常，您不会将一个节点的内容映射到另一个节点。
document.querySelectorAll() 扫描整个 DOM 以查找所有匹配的节点。如果您知道只有一个匹配的节点，或者您只想要第一个匹配的节点，那么这是对资源的浪费。相反，请使用 .querySelector() ，它会在找到第一个匹配项后停止搜索。由于您使用的是 JQuery，因此您应该始终保持一致。JQuery 不需要 .querySelector() 或 .querySelectorAll() ，只需使用 JQuery 选择器语法即可。

下面是一个示例，它展示了使用您在问题中显示的 HTML 类型的原始 JavaScript 和 JQuery 方法，以及您显示的相同 id 值和嵌套结构。您可以看到我正在使用不同的选择器来正确定位输入/输出元素。

// Standare DOM queries to get standard DOM objects
let source = document.getElementById("source");
let destination = document.querySelector("#spelling-correction > a");

// JQuery syntax to get JQuery objects:
let jSource = $("#source");
let jDestination = $("#spelling-correction > a");

// Vanilla JavaScript way to set up the event handler and do the work
source.addEventListener("keyup", function(){
  destination.textContent = source.value;  
});

// JQuery way to set up the event handler and do the work
jSource.on("keyup", function(){
  jDestination.text(jSource.val());   
});

textarea, div {
  border:3px solid grey;
  width:500px;
  height:75px;
  font-size:1.5em;
  font-family:Arial, Helvetica, sans-serif;
}

.destination { pointer-events:none; background:#e0e0e0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in the first textarea</p>
<textarea id="source"></textarea>
<div id="spelling-correction">
  Did you mean: <a href="#"></a>
</div>

Answer 2

您尝试过的所有代码中的问题是如何正确获取文本。

从您的 第一个示例 开始，应该使用 innerText 而不是 text() ，因为它是一个jquery对象，并且您返回的是DOM对象而不是jQuery对象：

setInterval(function() {
    childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
    $("#source")[1].val(childAnchors1.innerText);
}, 100);

在您的 第二个示例和第三个示例 中，您需要从 innerText 中删除括号，例如：

setInterval(function copyText() {
    $(".goog-textarea short_text")[1].val($("#spelling-correction > a")[0].innerText);
}, 100);

我建议使用纯js和 textContent 属性，例如：

setInterval(function() {
    var childAnchors1 = document.querySelectorAll("#spelling-correction > a")[0];
    document.querySelectorAll("#source")[1].value = childAnchors1.textContent;
}, 100);

注意： 我应该指出您的 HTML 代码无效，因为您使用了重复的标识符，而 id 属性在同一文档中应该是唯一的。