Square brackets in <textarea>

[Sir Osis of Liver]

 

Trying to put a url wrapped in img tags in a textarea so it can be selected, copied, and pasted into a post.  Sounds simple, doesn't it?

Here's the code -

Koodi [Valitse] Laajenna



<button type="button" onclick="embedURL()">Select</button>
<textarea id="embed" rows="1" onclick="this.focus();this.select()" readonly="readonly" style="overflow: hidden; vertical-align: 10%; width: 500px;">[img]http://www.domain.com/images/' . $uploaded_name . '[/img]</textarea>



Here's what displays in the textarea -

Koodi [Valitse] Laajenna



     [img]http://www.domain.com/images/



... but if you select and copy, you get this -

Koodi [Valitse] Laajenna



     [img]http://www.domain.com/images/image.jpg[/img]



It's all there and copies correctly, but doesn't show $uploaded_name or closing tag.  Tried escaping one or both brackets, and using ascii codes (&#91, &#93), no luck.  Something to do with php array code, I'd guess.  Any way around this?

[live627]

Need moar code. Two lines says jack diddly. This ain't Twitter.

[Sir Osis of Liver]

Here's the function -

Koodi [Valitse] Laajenna



function embedURL() {
    document.getElementById("embed").select();
}



... and here's the bit that calls it -

Koodi [Valitse] Laajenna



<div style="margin: 10px 0 10px 0;">
<button type="button" onclick="embedURL()">Select</button>
<textarea id="embed" rows="1" onclick="this.focus();this.select()" readonly="readonly" style="overflow: hidden; vertical-align: 10%; width: 500px;">http://www.domain.com/images/' . $uploaded_name . '</textarea>
</div>
Select and copy into your post.';



The purpose is to give the member the string to add to their post to embed the image.  The square brackets cut off the displayed text before $uploaded_name.  Select works, and it copies correctly from <textarea>, but doesn't display completely in the box.

[Arantor]

Is this inside SMF or not? In which case there are functions available for injecting text into a textarea

[Sir Osis of Liver]

No, it's a file uploader that launches in a popup from main menu.  Everything works, including select and copy, the tagged string is complete, but it's truncated in the textarea if there's a a pair of square brackets in the string.  Makes no difference if the brackets contain text or are empty, it loses the php variable and anything following.

[Sir Osis of Liver]

Ok, here's the workaround -

Koodi [Valitse] Laajenna



To display the image in a post, wrap it in <span style="font-weight: bold;">[img][/img]</span> tags, like this -
</br />';

$emb_text = "[img]http://www.thekrashsite.com/ferrarum/uploads/" . $uploaded_name . "[/img]";

echo '
<div style="margin: 10px 0 10px 0;">
<button type="button" onclick="embedURL()">Select</button>
<textarea id="embed" rows="1" onclick="this.focus();this.select()" readonly="readonly" style="overflow: hidden; vertical-align: 10%; width: 500px;">', $emb_text ,'</textarea>
</div>
Select and copy into your post.';



This displays the complete string in the box, selects and copies correctly.

But why doesn't it work the other way?

[Angelina Belle]

What does the html actually look like in the first case? Something which isn't there surely cannot be copied and pasted out of the Textarea.  So if you can select and copy it, then, surely, it is there.

The biggest difference I see is the use of . Instead of ,   But surely that would not make a difference, would it?

[live627]

But why doesn't it work the other way?

You leave me guessing. Was that in a PHP block? I have a feeling not...

[Sir Osis of Liver]

Turns out it's a bug in FF (what a surprise!) that they've been aware of since at least 2009.  The text wasn't being truncated, it wrapped to a second line that wasn't visible because rows="1".  FF ignores white-space: nowrap in <textarea>.  Fixed it by adding wrap="off".  It's not proper html, but it werks gud, and doesn't bother other browsers.

This is how it ended up:

Koodi [Valitse] Laajenna



<button type="button" onclick="embedURL()">Select</button>
<textarea id="embed" rows="1" onclick="this.focus();this.select()" readonly="readonly" style="overflow: hidden; vertical-align: 10%; width: 450px; white-space: nowrap;" wrap="off">', $emb_text ,'</textarea>



[Angelina Belle]

Congratulations!  Marked solved.