將文本從div innerHtml復制到textarea

Question

與iframe問題相關的問題： 將div從父網站復制到iframe中的文本區域

我正在嘗試將InnerHtml從div復制到TextArea。 我在同一網頁上制作了兩個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來解決它。

Answer 1

由於textarea是表單元素，因此.innerText或.innerHTML都不起作用。 您需要使用value屬性（或使用JQuery的.val()提取其內容。

和僅供參考：

• 它是innerText ，而不是.innertext 。
• .innerText是屬性，而不是函數，因此不要在其后使用() 。
• 它是.innerHTML ，而不是.innerHtml 。
• 當字符串中有應該解析為HTML的HTML，而.textContent用於不應解析為HTML的字符串時，將使用innerHTML 。 通常，您不會將一個內容映射到另一個。
• 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> 

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屬性在同一文檔中唯一時，您正在使用重復標識符。