javascript - 将文本从 div innerHtml 复制到 textarea
问题描述
一个与 iframe 问题相关的问题: Copy div from parent website to a textarea in 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
。
解决方案
由于 atextarea
是一个表单元素,因此既不工作.innerText
也不.innerHTML
工作。您需要使用value
属性(或.val()
使用 JQuery)提取其内容。
仅供参考:
- 是
innerText
,不是.innertext
。 .innerText
是一个属性,而不是一个函数,所以你不要()
在它之后使用。- 是
.innerHTML
,不是.innerHtml
。 innerHTML
当字符串中有 HTML 应该被解析为 HTML 时使用,并且.textContent
用于不应该被解析为 HTML 的字符串。通常,您不会将一个内容映射到另一个内容。document.querySelectorAll()
扫描整个 DOM 以找到所有匹配的节点。如果你知道你只有一个匹配的节点,或者你只想要第一个匹配的节点,那是一种资源的浪费。而是使用.querySelector()
,它会在找到第一个匹配项后停止搜索。由于您使用的是 JQuery,因此您应该在使用上保持一致。不需要.querySelector()
或.querySelectorAll()
使用 JQuery,只需使用 JQuery 选择器语法。
这是一个示例,它使用您在问题中显示的 HTML 类型显示了 vanilla 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>
推荐阅读
- controls - 使用 IRremote Arduino ESP8266 进行未知编码
- node.js - 为什么串行端口写入不适用于 for 循环?
- sql - 如何在 postgesql 的连接表中复制一行?
- mysql - 在 oracle 中使用正确的连接可以解决问题
- svn - tortoisesvn 慢 Windows 10
- postgresql - 如何限制 postgres 中更新的行数
- python-3.x - 如何将具有 object 类型的 numpy.ndarray 转换为 torch.tensor?
- python - 为什么当我再次执行时,confusion_matrix 会有所不同?
- python - Python)如何将字符串转换为字典?(奇怪的字符串类型)
- sed - 根据上一行的模式将上一行与下一行连接起来