ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript перенос строки в textContent
7 сообщений из 7, страница 1 из 1
Javascript перенос строки в textContent
    #39274181
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Хочу вставить перенос строки в 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, 22:35
| Ответить | Цитировать | Написать  
Javascript перенос строки в textContent
    #39274193
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
user89,

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

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

спасибо. Я тоже вчера экспериментировал с 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, 09:40
| Ответить | Цитировать | Написать  
Javascript перенос строки в textContent
    #39274409
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
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:12
| Ответить | Цитировать | Написать  
Javascript перенос строки в textContent
    #39274437
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
user89,

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

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


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