Как получить значение тега <pre>и сохранить все пробелы? - PullRequest
Новая
       36

Как получить значение тега <pre>и сохранить все пробелы?

0 голосов
/ 09 июля 2020

Я использую тег <pre> для сохранения пробелов и новых строк. Я использую contenteditable="true" внутри тега <pre>, чтобы пользователь мог редактировать данные. Я хочу сохранить данные, отредактированные пользователем, в переменной в JavaScript, сохранив вводимые пользователем данные, но я не совсем уверен, как это сделать. Любая помощь или предложение будут оценены. Спасибо!

XSL

<code><pre contenteditable="true"><xsl:value-of select="$txn_desc"/>

1 Ответ

1 голос
/ 09 июля 2020

Используйте .innerHTML, если вы хотите получить разметку внутри тега, и .textContent, если вам нужен только текст. 

const pre = document.querySelector("pre");//get the tag
const text = pre.textContent;
const html = pre.innerHTML;

Чтобы предотвратить вставку HTML в contenteditable элемент, вы можете добавить прослушиватель событий для нажатия клавиши и вставить вместо него "\ n" при нажатии клавиши ввода. 

pre.addEventListener("keydown", function(e){
    if(e.keyCode===13){
     document.execCommand('insertHTML', false, '\n');
     e.preventDefault();
  }
});

Демо: 

const pre = document.querySelector('pre');
document.querySelector('button').addEventListener("click", function(e){
    alert(pre.textContent);
});
pre.addEventListener("keydown", function(e){
    if(e.keyCode===13){
     document.execCommand('insertHTML', false, '\n');
     e.preventDefault();
  }
});

Text inside 
  
that is multi
line!
!
  
  !
...