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

Question

建立一个个人的小社交网络。作为设计的一部分，所有状态都应以不应该更改的默认文本开头，类似于“嗨，我的名字……”，然后用户完成其余的。有点像没有消失的HTML5占位持有人。做这件事的最佳方法是什么？

Answer 1

fiddle

如果有目的，请找到下面的代码。 markup：

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

注：出于某种愚蠢的原因，我假设了jQuery（请注意，您不为此wheed

Answer 2

need

jQuery，但使其更容易）。 在这里，是一种解决方案，使用了text-indent

和绝对位置

<span>

（对于前缀部分）的组合。

demo

：

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>

如果您想使用JavaScript执行您的任务，则可以设置一些事件侦听器，然后当用户进行更改时，检查是否会更改是否会更改文本。 SARBBOTTAM的新代码这样做，但是如果您修改原始文本，它将替换您已经键入的任何文本。我已经通过保存文本方面的先前值来解决此问题。

Html：

Answer 3

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

当然是一个工作

demo

。 其他答案中可能不提及的其他选项是设置键盘/按键事件侦听器，并使用JavaScript在TextAarea中获得Caret位置。如果它小于默认文本的长度，则只需调用event.preventdefault（）。对此的主要缺点是，可能无法使此完全跨浏览器兼容。

如果目标是用户不能更改此文本，那么您可以做几件事：

文本外部的文本（例如上方）

添加了文本中的文本，但使用CSS将其放置在文本方面。您可以使Textarea透明，以便用户可以看到文本。问题是，用户类型可以落在您放置在背景中的文本上的文本

Answer 4

将其输入Textarea

的背景图像

将文本放置在文本方面（

<textarea>Hi, my name is </textarea>
1. ）中，并使用JavaScript测试已输入的内容，并在不需要的内容中更改文本。您可以使用蒙版插件来执行此操作。
最佳选择是第一个选择和第四选择。我会去第一个，因为它是迄今为止最简单的

4. 添加了样式div内部的文本，该文本看起来像输入一样，然后样式的输入看起来像它无缝连接到Div（例如，修改边框和背景颜色以及根据需要修改）。
   除了CSS以外，什么都没有，用户可以看出，输入从预设的文本开始，并且不能修改，假设这是最终目标。