如何在html文本区域的开头添加默认文本？

Question

我正在建立一个个人的小社交网络。 作为设计的一部分，所有状态都应以不应更改的默认文本开头，类似于“嗨，我的名字是......”，然后用户完成剩下的工作。 有点像HTML5占位符，不会消失。 实现这一目标的最佳方法是什么？

Answer 1

如果它符合目的，请参考这个小提琴 ，请找到下面的代码。

标记：

<textarea id='status'>
Hi, my name is...
</textarea>

JavaScript的：

document.querySelector('#status').addEventListener('input', function(e){
    var defaultText = 'Hi, my name is...',
        defaultTextLength = defaultText.length;
    if(this.selectionStart === this.selectionEnd && this.selectionStart defaultTextLength {
        this.value = defaultText;
    }
});

Answer 2

注意：由于某些愚蠢的原因，我假设jQuery（请注意，您不需要 jQuery，但会让它更容易一些）。

这里有一个解决方案使用text-indent和绝对定位的<span> （用于前缀部分）的组合。

演示 ： http ： //jsfiddle.net/4YzZy/

---

 $('textarea.withprefix').each(function() { var prefix = $('<span/>') .text($(this).data('prefix')) .addClass('prefix') .appendTo('body') .css({ left: $(this).position().left + 'px', top: $(this).position().top + 'px', }); $(this).css({textIndent: prefix.outerWidth() + 'px'}); }); 

 textarea, span.prefix { font-family: arial; /* change these as needed, but ensure that the textarea and the span use the same font */ font-size: 1em; font-weight: normal; padding: 2px; border-width: 1px; } span.prefix { position:absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea class="withprefix" data-prefix="Hi There, "></textarea> 

Answer 3

如果要使用javascript执行任务，可以设置一些事件侦听器，然后在用户进行更改时，检查该更改是否会影响您要更改的文本。 Sarbbottam的新代码执行此操作，但如果您修改原始文本，它将替换您已输入的任何文本。 我通过保存textarea的先前值来解决这个问题。

HTML：

<textarea id="text">Hello, my name is </textarea>

使用Javascript：

var defaultText = "Hello, my name is ";
var valueOnKeyDown = new Array();
document.getElementById("text").addEventListener("keydown", function() {
    valueOnKeyDown.push(this.value);
}, false);
document.getElementById("text").addEventListener("keyup", function(e) {
    if(valueOnKeyDown[0].substring(0, defaultText.length) != this.value.substring(0, defaultText.length)) {
        this.value = valueOnKeyDown[0];
    }
    valueOnKeyDown = new Array();
}, false);

当然还有一个工作演示 。

另一个可能有效的选项是在其他答案中没有提到的是设置keydown / keypress事件监听器并使用javascript在textarea中获取插入位置。 如果它小于默认文本的长度，则只需调用event.preventDefault（）。 这样做的主要缺点是可能无法使这种完全跨浏览器兼容。

Answer 4

如果目标是用户无法更改此文本，那么您可以执行以下操作：

1. 在textarea之外添加文本（例如在它上面）
2. 在textarea外部添加文本，但使用css将其放在textarea后面。 您可以使textarea透明，以便用户可以看到文本。 问题在于用户输入的文本可能会落在您在后台放置的文本上
3. 把它放在textarea的背景图片中
4. 将文本放在textarea（ <textarea>Hi, my name is </textarea> ）中，并使用JavaScript来测试键入的内容，如果文本变成你不想要的内容，则更改文本。 您可以使用屏蔽插件来执行此操作。

最好的选择是第一个选项和第四个选项。 我是第一个，因为它是迄今为止最简单的