Member Avatar for xresplendencex

I'd like to embed an HTML box in a blog (LiveJournal) entry of mine.

An example of the sort of HTML box I'm talking about is here: http://puuchan.livejournal.com/1082.html?mode=reply

I'd like to have a box that I can place a code in so that others can copy and paste it. (Like the one that that says "copy & paste the following code:".

Is this possible? (And for the record, is it even called an HTML box? Or a text box? Or something totally different?)

Thanks.

  • 2 Contributors
  • 2 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by xresplendencex

Dani AI

Generated

As started to point out, the approach in the example can be made more user-friendly and resilient with a few small tweaks. The box should be easy to select/copy, preserve spacing and long lines, and avoid browser spellcheck or accidental edits. The snippets below show common, safe improvements and a simple way to auto-select for one-click copying.

Use a read-only, monospace textarea with CSS to preserve formatting and enable scrolling:

<textarea id="snippet" readonly spellcheck="false" style="font-family:monospace; white-space:pre; overflow:auto; width:100%; height:8em;">
// paste code here
</textarea>

Add a tiny script so the content is selected when focused (helpful for keyboard users and for mobile):

<script>
document.getElementById('snippet').addEventListener('focus', function() {
  this.select();
});
</script>

Cautions and alternatives: many blog engines sanitize or strip certain tags and scripts, so test whether raw HTML is allowed in your LiveJournal entry. If the platform strips textarea or script, use the site’s built-in code block feature, a <pre><code> block (semantic for display-only), or host the snippet on a paste service or Gist and link to it. For attribute and behavior details consult the authoritative reference: MDN: textarea element.

Recommended Answers

All 2 Replies

Member Avatar for buddylee17

It's called a textarea.

<textarea rows='5' cols='42'>
Put whatever you'd like to be inside the textarea here</textarea>

To make the box wider, increase the cols value. To make it taller, increase the rows value.

Member Avatar for xresplendencex

Thanks so much! I'll try it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.