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());
}

Answer 3

This code will throw the default text back into the beginning of the text field if it's not present after the user changes it:

<script type="text/javascript">
function fixText()
{
    var textAreaElement = document.getElementById("mytextarea");
    var searchPhrase = "I like/dislike this site because";
    if(textAreaElement)
    {
        if(textAreaElement.value.indexOf(searchPhrase) != 0)
        {
            textAreaElement.value = searchPhrase + " " + textAreaElement.value
        }
    }
}
</script>

<textarea id="mytextarea" onblur="fixText();" onchange="fixText();">I like/dislike this site because</textarea>

I threw this together in just a minute or so, and it has some obvious flaws, such as the fact that if someone only deletes SOME of the default text they might be get a weird result like "I like/dislike this site because I like this site because it's nice". But I'm sure you could manipulate it to make it more effective. Something like this might work in combination with pimvdb's answer.

I like Elian Ebbing's answer though, if your employer will allow you to do it that way.