Новая строка в текстовой области



<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-файла.
Как я могу это сделать?

510   11  

11 ответов:

попробуй это:

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

&#10; подача строки и &#13; возврат каретки 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.&#13;&#10;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.&#10;This is my statement2</textarea>

заменить на
теги:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

чтобы получить новую строку внутри текстовой области, поместите туда фактический разрыв строки:

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>

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

  • &#10; является (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&#10;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 как новую строку внутри текстового поля.

вы можете использовать \n вместо /n.

после многих тестов, следующий код работает для меня в 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,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"

Т. через свойство innerText = "позиция ЛФ:" + Т.значение.indexOf ("\n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>

Comments

    Ничего не найдено.