CODEWITHSUNDEEP
javascriptjquerygoogle-chromeline-breaks
Stan
Stan

Reputation: 8768

JavaScript's html setter "eats" leading linebreak inside textarea - how to overcome?

SOLVED

The problem is solved in a tricky way. The answer is posted below.

I have a textarea control with white-space: pre; style, which works perfectly well while editing new stuff, storing it into a database (intact, with \r\n), and displaying as an inline part of html page (inside a div with the same style).

The problem occurs when I try to edit such text in a popup dialog with the same textarea feeded from AJAX response. I'm trying to assign received text into the textarea by means of jQuery:

$('#textfield').html(text);

Actually the whole dialog with filled in textarea is received in the response.

Unfortunately, this html-setter removes leading linebreak. Is there a way to eliminate such inconsistent behaviour? Linebreaks which occur further in content are presaved normally.

Example of html code, received from the server:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
Text with line break at its start.
More line break</textarea>

After placing the code by means of html into container, I got exactly this:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">Text with line break at its start.
More line break</textarea>

P.S. More code added from the context, though I don't think this may help somehow:

JavaScript:

var d = $('#dialog');

console.log(msg); // correct data
console.log('==============');

d.html(msg).css({position: "absolute", top: (pos.top + height) + "px", left: (pos.left + width) + "px"});

console.log(d.html()); // corrupted data

d.show();
$('#newtext').focus();

HTML with container:

<div id="dialog" class="popup">
</div>

UPDATE:

As @Pointy suggested, it's indeed not jQuery's issue. I replaced the html-setter to the plain old:

document.getElementById("dialog").innerHTML = msg;

and got the same problem. Browser is Chrome. Can't test other browsers right now.

Upvotes: 0

Views: 399

Answers (3)

Stan
Stan

Reputation: 8768

I've got a workaround, very simple one. Into the original HTML code of the textarea:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;"><?php echo $templateVariablePlaceholder; ?></textarea>

I added a linebreak after opening tag:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
<?php echo $templateVariablePlaceholder; ?></textarea>

Now it works, as expected.

Upvotes: 0

Brian Cray
Brian Cray

Reputation: 1275

Could you do text = text.match(/[^\n]+/g).join('<br>'); before using .html(text) to replace new lines with <br>s?

Upvotes: 0

Stephen
Stephen

Reputation: 5470

If you're actually using a <textarea>, use .val instead of .html.

Edit - maybe this is a bit closer to what you need, if you're inserting things here and there...

var textarea = $("<textarea>").val(query);
$(".div-container").append(textarea);
//or, if you're going to replace the one in there
$(".div-container textarea").replaceWith(textarea)

Basically the point is that you can assign a variable with a jquery reference to the textarea and then you can take that and put it anywhere you need it.

Upvotes: 2

Related Questions