如何将默认文本添加到 html 文本区域的开头？答案

【问题标题】：How do I add a default text to the beginning of an html text area?如何将默认文本添加到 html 文本区域的开头？
【发布时间】：2014-09-10 20:00:17
【问题描述】：

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

【问题讨论】：

为什么不这样做呢？你好，我叫……
听起来毫无意义...只需将其添加到适用的 html 中
如果它没有改变，而且必须一直存在，你为什么要将它添加到用户输入中？ JavaScript 容易受到操纵，本质上是不安全的，任何用户都可以访问。将此添加到表示层，用户无法（轻松）更改它并且您可以轻松更改它（如果您愿意的话），而无需经历整个您的数据库以删除/修改字符串。
表示层是什么意思？
@Voltron - 这意味着将其添加到前端以仅在提交时静态前缀不是 textarea 值的一部分的方式进行显示 - 要求您稍后在服务器上删除/替换边。即就像我发布的答案一样。

标签： javascript html textarea placeholder

【解决方案1】：

请参考fiddle 如果它达到目的，那么请在下面找到代码。

标记：

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

【讨论】：

有没有办法使文本不可擦除？
没有javascript。

【解决方案2】：

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

在文本区域之外添加文本（例如在其上方）
在 textarea 之外添加文本，但使用 css 将其放在 textarea 后面。您可以使 textarea 透明，以便用户可以看到文本。存在的问题是用户输入的文本可能会覆盖您放置在背景中的文本
放到textarea的背景图片中
将文本放置在文本区域 (<textarea>Hi, my name is </textarea>) 中，并使用 JavaScript 测试已键入的内容，并在文本变为您不想要的内容时更改文本。您可以使用屏蔽插件来执行此操作。

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

【讨论】：

【解决方案3】：

注意：出于某种愚蠢的原因，我假设使用 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>

【讨论】：

这很完美！我还没有包含 jquery，所以我必须添加它。

【解决方案4】：

如果您想使用 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);

当然还有工作的demo。

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

【讨论】：