Manipulating the textarea

12 04 2011

Today I’m taking a break from PHP to examine an aspect of the front-end, namely manipulating the textarea element.  In the old days, like around ’99, it really was a bit limited. But, now, thanks to advances in CSS and JavaScript, you can certainly do more.

If you want to style the textarea, you can select background and text colors, as follows:


textarea {





JavaScript has several string manipulation functions, of which I will show examples below using  toLowerCase(), toUpperCase(), charAt(), join(), split() and substr().

For this purpose, I am using the following HTML:

<textarea id="t" cols="80" rows="20" name="t">

the rain in Spain stays mainly in the plain.

<button onclick="ChangeLineTwo()">UpperCase Line Two</button>

<button onclick="GetSelection ()">Get the current selection</button>

When I initially started tinkering with the textarea, I came up with the following JavaScript:

document.getElementById('t').style.font="32px Arial,Helvetica";

function ChangeLineTwo(){

var data = document.getElementById('t').value.split("\n");

var temp = data[1].toUpperCase();data[1] = temp;

document.getElementById('t').value = data.join("\n");

The above script works but neglects to provide a more fine, granular control.  I searched for an answer and discovered a very nice informative tutorial at: which I highly recommend.

I added on another script that targets browsers like Safari and FireFox:

function GetSelection () {
            var selection = "";
            var textarea = document.getElementById("t");
// check whether some text is selected in the textarea
            if (textarea.selectionStart != textarea.selectionEnd) {
                    selection = textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd);
            if (selection == "") {
                alert ("No text is selected.");

	   if (textarea.selectionStart != textarea.selectionEnd) {
                    var newText = textarea.value.substring (0, textarea.selectionStart)
                         + selection.charAt(0) + selection.substring(1,selection.length).toLowerCase() +
                        textarea.value.substring (textarea.selectionEnd);
                    textarea.value = newText;
         } // end of function

The way the replacement works in the last script is that you need to do three things,
1. get the start of the textarea’s value which is represented by

textarea.value.substring (0, textarea.selectionStart)

2. Supply the replacement text which in this case is to code to retain the first character while lowercasing the rest of the selection:

selection.charAt(0) + selection.substring(1,selection.length).toLowerCase()

3. I take the above two values and concatenate them with the remainder of the textarea following the selection:

 textarea.value.substring (textarea.selectionEnd);

This work is licensed under a Creative Commons License



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: