将文本从div innerHtml复制到textarea

时间:2018-10-05 16:15:16

标签: javascript jquery html iframe selector

与此问题有关的iframe问题: Copy div from parent website to a textarea in iframe

我正在尝试将InnerHtml从div复制到TextArea。 image 我已经在同一网页上制作了两个Google翻译实例,并且尝试将第一个实例的自动更正应用于第二个实例,而不更改第一个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来解决它。

2 个答案:

答案 0 :(得分:3)

由于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类型(具有相同的id值和显示的嵌套结构)显示原始JavaScript和JQuery方法。您可以看到我正在使用不同的选择器来正确定位输入/输出元素。

// 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>

答案 1 :(得分:1)

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

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

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);

enter image description here

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