HTML/JavaScript: How to make default text of a <textarea> undeletable?

Question

Is there a way to make the default text of a <textarea> input become undeletable by the user? For example, if we had a <textarea> like this:

<textarea>I like/dislike this site because</textarea>

The user should be able to complete the "I like/dislike this site because" sentence but never be able to remove this part.

I understand there are easier approaches for this problem, but I've been asked to do it this way. Also, the target website uses prototype javascript framework so it must either involve prototype or no framework. jQuery cannot be used as it would cause conflict with prototype.

Many thanks in advance.

Answer 1

You could make it look like it's part of the textarea, even if it is not.

Simple jsfiddle example to demonstrate the idea

Answer 2

I would fake it. It's dirty but you cannot delete the default text: http://jsfiddle.net/2EMkF/3/.

function $(id) {return document.getElementById(id);}
$('s').addEventListener('click', function() {
    $('t').setSelectionRange(33, 33)
    $('t').focus();
});
$('t').addEventListener('keyup', function() {
    if($('t').value.substring(0, 33) != ' '.times(33)) {
            $('t').value = ' '.times(Math.max(
                33, $('t').value.firstspace())
            )
            + $('t').value.fromnospaces();
            $('t').setSelectionRange(33,33);
    }
});

function t() {
    if(this.selectionStart < 33) this.setSelectionRange(33,33);
}

$('t').addEventListener('keyup', t);
$('t').addEventListener('click', t);

String.prototype.times = function(n) {
    var r = "";
    for(var i = 0; i < n; i++) r += this;
    return r;
}

String.prototype.firstspace = function() {
    for(var i = 0; i < this.length; i++)
        if(this[i] != ' ')
            return i;
    return -1;
}

String.prototype.fromnospaces = function() {
    return this.substring(this.firstspace());
}