Member Avatar for dks1383

Hi all

How can I write a javascript code to change the alignment of a textarea so that the user can select a part of of a textarea and change the alignment of this part by clicking a button?
thanks

  • 4 Contributors
  • 3 Replies
  • 126 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Fungus1487

Dani AI

Generated

Short answer: a <textarea> is plain text and does not support per-selection styling. That is why 's note about text-align and 's warning that "part of the text" cannot be aligned differently are correct. The text-align/element.style.textAlign setting affects the entire control only.

To get per-selection alignment, switch to an editable HTML surface (contenteditable or a designMode iframe) or use a rich-text editor. A minimal contenteditable approach uses browser editing commands:

<div id="editor" contenteditable="true" style="min-height:120px;border:1px solid #ccc"></div>

<button onclick="document.execCommand('justifyLeft')">Left</button>
<button onclick="document.execCommand('justifyCenter')">Center</button>
<button onclick="document.execCommand('justifyRight')">Right</button>

document.execCommand is widely supported but deprecated; for production use, consider a maintained editor such as CKEditor, TinyMCE, or Quill. See the MDN pages on the contenteditable attribute and execCommand for details (contenteditable, execCommand).

If keeping a plain <textarea> is required for storage but alignment metadata is still needed, wrap the selected range in markup (BBCode/HTML tags) and render it in a separate preview pane. Selection indexes are available via selectionStart/selectionEnd on textareas (selectionStart). Example pattern:

var start = ta.selectionStart, end = ta.selectionEnd;
ta.value = ta.value.slice(0,start) + "[center]" + ta.value.slice(start,end) + "[/center]" + ta.value.slice(end);

Troubleshoot: older IE uses document.selection fallback; mixing raw HTML into a textarea will not change its visual rendering — only a rendered preview or a contenteditable surface will show alignment differences.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

Try the textAlign style.

But it may not work. The text alignment of a text box or a text area depends on the data type it is used for.

Member Avatar for temp304

text-align Attribute | textAlign Property

Sets or retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified


The property is read/write for all objects except the following, for which it is read-only: currentStyle . The property has a default value of left . The Cascading Style Sheets (CSS) attribute is inherited.

Applies To: BLOCKQUOTE , BODY , CENTER , currentStyle , DD , DIR , DIV , DL , DT , FIELDSET , FORM , hn , HR , INPUT type=password , INPUT type=text , LI , LISTING , MARQUEE , MENU , OL , P , PLAINTEXT , PRE , runtimeStyle , style , TABLE , TD , TEXTAREA , TH , TR , UL , XMP

Member Avatar for Fungus1487

but you still wont be able to align PART of the text differently to another part. Not in the same textbox anyway.

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.