.Val () текстовой области не учитывает новые строки - PullRequest
Новая
       35

.Val () текстовой области не учитывает новые строки

14 голосов
/ 13 декабря 2011

Свойство .val() элемента в jQuery для <textarea>, похоже, не работает с новыми строками.Мне нужна эта функция, так как текстовая область предназначена для распознавания клавиши ввода и отображения ее в качестве предварительного просмотра с новой тактовой чертой.

Однако, что происходит, показано в этой скрипке: http://jsfiddle.net/GbjTy/1/. Текст отображается, но не в новой строке.

Как выполнить предварительный просмотр, включив в него новые строки, и я знаю, что это возможно, поскольку это происходит в предварительном просмотре вопроса о переполнении стека.

Спасибо.

PS Я видел другие ссылки на SO, относящиеся к этому, но все они говорят, заставляют Конечного пользователя использовать некоторый код, который не идеален для меня.Как я могу добиться этого без того, чтобы Конечный пользователь не написал какой-либо конкретный код, как здесь, в SO Question Preview, где Enter работает так, как должно в предварительном просмотре.

Ответы [ 10 ]

39 голосов
/ 13 декабря 2011

Это проблема CSS, а не проблема JavaScript. HTML по умолчанию сворачивает пробелы & mdash; это включает игнорирование новых строк.

Добавьте white-space: pre-wrap к выходному див. http://jsfiddle.net/mattball/5wdzH/

Это поддерживается во всех современных браузерах: https://caniuse.com/#feat=css3-tabsize

10 голосов
/ 13 декабря 2011

Принудительные новые строки в текстовых областях - \n с, другие теги HTML, кроме текстовых, будут их игнорировать. Вы должны использовать <br />, чтобы вызвать новые линии в этих элементах.

Я предлагаю вам использовать JavaScript, чтобы исправить это, а не CSS, как вы уже полагаетесь на JavaScript. 

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/\n/g, '<br />') );
});

Вы можете найти обновленную версию здесь: http://jsfiddle.net/GbjTy/2/

3 голосов
/ 13 декабря 2011

Попробуйте что-то вроде этого: 

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
});

В HTML пробелы по умолчанию игнорируются.

Вы также можете изменить тег <div> на тег <pre>: 

<code><pre id="output_div">

И это тоже сработает.

2 голосов
/ 18 декабря 2012

В случае, если

  • , вы НЕ отображаете .val () текстовой области на другой странице (например, отправляете форму сервлету и пересылаете другой JSP).

  • с использованием .val () текстовой области как части кодировки URL (например, mailto: с телом в качестве содержимого текстовой области) в Javascript / JQuery

затем вам нужно URLE закодировать текстовое описание следующим образом: 

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
2 голосов
/ 13 декабря 2011

Ваши символы новой строки выводятся отлично, но HTML игнорирует символы новой строки: ему нужно <br>.

Используйте простую функцию перевода строки на следующий: 

function nl2br_js(myString) {
var regX = /\n/gi ;

s = new String(myString);
s = s.replace(regX, "<br /> \n");
return s;
}

$( "#watched_textarea" ).keyup( function() {
       $( "#output_div" ).html( nl2br_js($( this ).val()) );
    });

jsfiddle здесь: http://jsfiddle.net/r5KPe/

Код отсюда: http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

2 голосов
/ 13 декабря 2011 
$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

Вам необходимо заменить символы новой строки тегами <br> для вывода HTML.

Вот демонстрационная версия: http://jsfiddle.net/GbjTy/3/

1 голос
/ 17 сентября 2016

Существует простое решение: сделать контейнер с предварительным тегом. 

        <textarea id="watched_textarea" rows="10" cols="45">test </textarea>
        <pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span>
$ ("# watched_textarea"). keyup (function () { . $ ( "# Output_div") HTML ($ (это) .val ()); });
0 голосов
/ 20 июня 2018

Я пытался установить значение textarea с помощью jquery в шаблоне лезвия laravel, но код ломался, потому что в переменной были новые строки.

мой фрагмент кода был 

$("#textarea_id").val("{{ $php_variable }}");

Я решил свою проблему, изменив свой фрагмент кода, как показано ниже. 

$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");

, если кто-либо из вас столкнулся с этой проблемой, может от этого выиграть.

0 голосов
/ 02 марта 2018

Я нашел более удобный метод с использованием jquery.

samplecode

HTML 

    <textarea></textarea>
    <div></div>
    <button>Encode</button>

JS 

$('button').click(function() {

    var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else

    $('div').html(encoded.replace(/\n/g,'<br/>'))
});
0 голосов
/ 17 января 2014 
<?php 

//$rsquery[0] is array result from my database query
//$rsquery[0] = 1.1st Procedure \n2.2nd Procedure
//txtRisks is a textarea

//sample1
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string);
return $string;
}

//sample2
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string);
return $string;
}

echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')";

?>

Справочник по PHP по ссылке

...