Новая строка в текстовой области
<textarea cols='60' rows='8'>This is my statement one.n This is my statement2</textarea>
<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>
Я пробовал оба, но новая строка не отражается при рендеринге html-файла.
Как я могу это сделать?
11 ответов:
попробуй это:
<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
подача строки и возврат каретки HTML entitiesВикипедия. Таким образом, вы фактически анализируете новую строку ("\n"), а не отображаете ее как текст.
<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>Скрипка показывает, что он работает:http://jsfiddle.net/trott/5vu28/.
Если вы действительно хотите, чтобы это было на одной строке в исходном файле, вы можете вставить ссылки на символы HTML для подачи строки и возврата каретки, как показано в ответе от @Bakudan:
<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
я нашел
String.fromCharCode(13, 10)полезно при использовании вида двигателей. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCodeэто создает строку с фактическими символами новой строки в ней и таким образом заставляет механизм представления выводить новую строку, а не экранированную версию. Например: использование NodeJS EJS view engine - это простой пример, в котором любой \n должен быть заменено:
viewHelper.js
exports.replaceNewline = function(input) { var newline = String.fromCharCode(13, 10); return input.replaceAll('\n', newline); }EJS
<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>оказывает
<textarea>Blah blah blah</textarea>
replaceAll:
String.prototype.replaceAll = function (find, replace) { var result = this; do { var split = result.split(find); result = split.join(replace); } while (split.length > 1); return result; };
попробуйте это.. это работает:
<textarea id="test" cols='60' rows='8'>This is my statement one. This is my statement2</textarea>заменить на
теги:$("textarea#test").val(replace($("textarea#test").val(), "<br>", " ")));
чтобы получить новую строку внутри текстовой области, поместите туда фактический разрыв строки:
<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
я думаю, что вы путаете синтаксис различных языков.
является (HtmlEncoded значение ASCII 10 или) литерал символа перевода строки в HTML строку. Это делает не визуализация в виде разрыва строки в HTML (см. Примечания внизу).
\nявляется литералом символа перевода строки (ASCII 10) в Javascript строку.
<br/>строка перерыв в HTML. Многие другие элементы, например<p>,<div>и т. д. Также визуализируют разрывы строк, если они не переопределены некоторыми стилями.надеюсь, следующие иллюстрации сделать это яснее:
T.innerText = "Position of LF: " + t.value.indexOf("\n"); p1.innerHTML = t.value; p2.innerHTML = t.value.replace("\n", "<br/>"); p3.innerText = t.value.replace("\n", "<br/>");<textarea id="t">Line 1 Line 2</textarea> <p id='T'></p> <p id='p1'></p> <p id='p2'></p> <p id='p3'></p>несколько моментов, чтобы отметить о Html:
- The
innderHTMLстоимостьюTEXTAREAэлемент не отображает Html. Попробуйте следующее:<textarea>A <a href='x'>link</a>.</textarea>посмотреть.- в
Pэлемент оказывает все последовательные пробельные символы (в том числе новые направления), как один пробел.- символ LF не отображается в новой строке или разрыве строки в HTML.
- The
TEXTAREAотображает LF как новую строку внутри текстового поля.
после многих тестов, следующий код работает для меня в Typescreipt
export function ReplaceNewline(input: string) { var newline = String.fromCharCode(13, 10); return ReplaceAll(input, "<br>", newline.toString()); } export function ReplaceAll(str, find, replace) { return str.replace(new RegExp(find, 'g'), replace); }
Если вы говорите об использовании значения textarea где-то еще на Вашей странице и рендеринге новых строк, я нашел CSS propperty бело-пространстве: предварительно обертывание; работать очень хорошо, и это простое решение. Может быть, это кому-то поможет.
мой
.replace()функция, использующая шаблоны, описанные в других ответах, не работала. Шаблон, который работал для моего случая был:var str = "Test\n\n\Test\n\Test"; str.replace(/\r\n|\r|\n/g,' '); // str: "Test Test Test"
Т. через свойство innerText = "позиция ЛФ:" + Т.значение.indexOf ("\n");
p3.innerText = t.value.replace("\n", ""); <textarea id="t">Line 1 Line 2</textarea> <p id='p3'></p>
Comments