HTML/JavaScript:如何使不可deletable?

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:

是否有一种方法可以使输入的默认文本成为用户不可修改的?例如，如果我们有一个像这样的:</p>

<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.

我知道有更简单的方法来解决这个问题，但是我被要求这样做。此外，目标网站使用原型javascript框架，因此它必须要么包含原型，要么不包含框架。jQuery不能使用，因为它会导致与prototype的冲突。

Many thanks in advance.

提前感谢。

3 个解决方案

#1

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

你可以让它看起来像是textarea的一部分，即使它不是。

Simple jsfiddle example to demonstrate the idea

简单的jsfiddle示例演示了这个概念

#2

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

我会假装。它很脏，但是您不能删除默认的文本: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());
}

#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.

我在一分钟左右的时间里把它整合在一起，它有一些明显的缺陷，比如如果有人只删除一些默认文本，他们可能会得到一个奇怪的结果，比如“我喜欢/不喜欢这个网站，因为我喜欢这个网站，因为它很好”。但我相信你可以操纵它使它更有效。类似这样的东西可能与pimvdb的答案结合在一起。

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

我喜欢Elian Ebbing的回答，如果你的雇主允许你这样做。

#1