Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript перенос строки в textContent / 7 сообщений из 7, страница 1 из 1
14.07.2016, 22:35
    #39274181
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
Хочу вставить перенос строки в textContent. Может и правда по спецификации нельзя...
Если в <textarea> набрать несколько строк текста, а потом скопировать, то всё равно не получается, хотя коды символов правильные
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8 {height:40px; width:200px; border:1px solid #d1d1d1;}
</style>
</head>
<body>
<div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div>
<div id="d5"></div> <div id="d6"></div><div id="d7"></div> <div id="d8"></div>
<br> <button onclick="copyText()">Скопировать из textarea</button>
<textarea id="memo"></textarea>
<script>
function gid(i) {return document.getElementById(i);}
function ord(str) {
  var ch = str.charCodeAt(0);
  if (ch>0xFF) ch-=0x350;
  return ch;
}

gid('d1').textContent = 'Строка 1 ' +'\n'+ ' Строка 2';
gid('d2').textContent = 'Строка 1 ' +'\r'+ ' Строка 2';
gid('d3').textContent = 'Строка 1 ' +'\r\n'+ ' Строка 2';
gid('d4').textContent = 'Строка 1 ' +'\u000D\u000A' + ' Строка 2';
gid('d5').textContent = 'Строка 1 ' +'\u000A' + ' Строка 2';
gid('d6').textContent = 'Строка 1 ' +'\u000D' + ' Строка 2';
gid('d7').textContent = 'Строка 1 ' +String.fromCharCode(13)+String.fromCharCode(10)+ ' Строка 2';
gid('d8').innerHTML = 'Можно только<br>через innerHTML';

function copyText() {
  var d8 = gid('d8');
  d8.textContent = gid('memo').value;
  str2 = d8.textContent;
  for (var i=0; i<str2.length; i++) {
    console.log(str2[i] +' '+ ord(str2[i]));
  }
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.07.2016, 23:11
    #39274193
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
user89,

Код: javascript
1.
console.log(gid('d8').getElementsByTagName('*'))[0];
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.07.2016, 23:24
    #39274197
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
P.S.
Наверное многие обращали внимание, что в если у блока установлен атрибут contentEditable=true,
то копирование оттуда и последующая вставка туда-же происходит с учётом стилей и дочерних объектов (цвет например копипастится).

Потому что это не текст, а набор html-объектов со стилями и дочерними объектами.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.07.2016, 09:40
    #39274315
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
бухалтер фантоцци,

спасибо. Я тоже вчера экспериментировал с contentEditable. С word-wrap ещё игрался...
В общем, остановился на таком варианте
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#d1, #d2 {height:40px; width:200px; border:1px solid #d1d1d1; margin:2px;}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<button onclick="run()">Установить перенос</button>
<script>
function gid(i) {return document.getElementById(i);}

function setWrap(el) {
  el.innerHTML = el.innerHTML.replace(/\n/gi, '<br>');
}

function run() {
  setWrap(d1);
  setWrap(d2);
}

var d1 = gid('d1'), d2 = gid('d2');
d1.textContent = 'Строка 1 <br>' +'\n'+ 'Строка 2';
d2.textContent = 'Строка 1 &#160;' +String.fromCharCode(13)+String.fromCharCode(10)+ ' Строка 2';
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.07.2016, 11:12
    #39274409
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
user89,

Изменение textContent удаляет остальные вложенные элементы (кроме текстовых узлов),
поэтому, может проще сразу использовать innerHTML с преобразованием пробельных символов из исходной строки?

Вот можно поиграться с разбивкой блока на текстовые узлы:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#d1, #d2 {height:80px; width:200px; border:1px solid #d1d1d1; margin:2px;}
#d3 { width:50%; height:50%; background:#000080; }
</style>
</head>
<body>
<div id="d1">111<div id="d3"></div>222</div>
<div id="d2"></div>
<button onclick="run()">Установить перенос</button>
<script>
function gid(i) {return document.getElementById(i);}

function setWrap(el) {
  el.innerHTML = el.innerHTML.replace(/\n/gi, '<br>');
}

function run() {
  setWrap(d1);
  setWrap(d2);
}

var d1 = gid('d1'), d2 = gid('d2');
for (var i = 0; i < d1.childNodes.length; i++) {
    console.log( d1.childNodes[i].nodeValue );
}
console.log(d1.textContent);
//d1.textContent += 'Строка 1 <br>' +'\n'+ 'Строка 2'; // +=
//d2.textContent = 'Строка 1 &#160;' +String.fromCharCode(13)+String.fromCharCode(10)+ ' Строка 2';
</script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.07.2016, 11:38
    #39274437
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
user89,

Предположу, что решение использовать textContent возникло в качестве защиты от ввода произвольного HTML-кода во время предпросмотра...
Если это так, то смысла не вижу, пусить злоумышленник у себя что хочет вставляет, при записи на сервер в любом случае нужно проверять.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.07.2016, 12:37
    #39274534
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript перенос строки в textContent
бухалтер фантоцци,

тут задача такая. С сервера приходят сообщения из разных источников, часть их них мне не подвластна. innerHTML не подходит, а вот textContent - идеально.
Было непонятно, почему строки не переносятся... Вчера вечером туго соображал, а сегодня на свежую голову проблему решил
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript перенос строки в textContent / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]