Скопируйте текст из div innerHtml в текстовое поле - PullRequest
Новая
       21

Скопируйте текст из div innerHtml в текстовое поле

0 голосов
/ 05 октября 2018

Вопрос, связанный с этой проблемой с проблемой iframe: Скопировать div с родительского веб-сайта в текстовое поле в 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 голосов
/ 05 октября 2018

Поскольку textarea является элементом формы, ни .innerText, ни .innerHTML работать не будут.Вам нужно извлечь его содержимое с помощью свойства value (или .val() с JQuery).

И, к вашему сведению:

  • Это innerText, а не .innertext.
  • .innerText - это свойство, а не функция, поэтому после него не следует использовать ().
  • Это .innerHTML, а не .innerHtml.
  • innerHTML используется, когда в строке есть HTML, который должен быть проанализирован как HTML, и .textContent используется для строк, которые не должны анализироваться как HTML.Обычно вы не отображаете содержимое одного на другое.
  • document.querySelectorAll() сканирует весь DOM, чтобы найти все подходящие узлы.Если вы знаете, что у вас есть только один соответствующий узел или вам нужен только первый соответствующий узел, это пустая трата ресурсов.Вместо этого используйте .querySelector(), который прекращает поиск после того, как найдено первое совпадение.Поскольку вы используете JQuery, вы должны быть последовательны в его использовании.Нет необходимости в .querySelector() или .querySelectorAll() с JQuery, просто используйте синтаксис селектора JQuery.

Вот пример, который демонстрирует подходы vanilla JavaScript и JQuery с использованием типов HTML, которые вы показываете в своемвопрос с теми же 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>
0 голосов
/ 05 октября 2018

Проблема во всех кодах, которые вы пробовали, заключается в том, как правильно получить текст.

Начиная с вашего Первый пример следует использовать 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);

enter image description here

ПРИМЕЧАНИЕ: Я должен указать, что ваш HTML-код недействителен, поскольку вы используете дубликат идентификатора, когда атрибут id должен быть уникальным в том же документе.

...