如何在用户在 html textarea 中输入文本之前添加永久文本？答案

【问题标题】：How do I add permanent text before user enters a text in html textarea?如何在用户在 html textarea 中输入文本之前添加永久文本？
【发布时间】：2019-06-15 04:49:26
【问题描述】：

我想在用户输入文本之前在 html textarea 中添加一个永久文本，例如在您编写任何代码之前写入路径的 cmd 中。我怎样才能做到这一点？

【问题讨论】：

查看jQuery Terminal Emulator。这可能有点矫枉过正，因为它可以用作功能性命令行解释器，但我认为它很有趣。 Demo.

标签： javascript html css textarea

【解决方案1】：

嗯，据我所知，没有你想要的内置功能。

但是，结合一些东西，我们可以实现接近它的目标。

诀窍是：

将 textarea 包装在 div 标记中
在给定的div 上使用::before 伪元素来添加和定位固定文本
在 textarea 上使用text-indent css 属性为我们的固定文本腾出空间:)

#cont {
  position: relative;
  display: block;
}

#cont::before {
  content: 'myFixedText:\>';
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 99;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

textarea {
  text-indent: 100px;
  min-width: 300px;
  min-height: 150px;
  font-size: 14px;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif
}

<div id="cont">
  <textarea></textarea>
</div>

【讨论】：

【解决方案2】：

你可以用 JavaScript 实现它：

$('textarea.text').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-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="text" data-prefix="Your path or text > "></textarea>

【讨论】：

【解决方案3】：

要在 textarea 中获取文本，您可以这样做：

<textarea>Insert permanent text here</textarea>

占位符文本将允许用户在其上键入，这不是永久性的。

【讨论】：

这个文本可以被用户删除，这也不是永久的。

【解决方案4】：

像这样使用占位符属性：

<textarea placeholder="Describe yourself here..."></textarea>

【讨论】：

【解决方案5】：

这是一个在输入或文本区域中输入任何内容之前有文本的示例：

<input type="text" name="TheName" **placeholder=**"Type your name">
<textarea name="TheTextArea" **placeholder=**"Your textarea..."></textarea>

【讨论】：

占位符在用户开始输入后立即被删除。

【解决方案6】：

占位符属性是输入和文本区域最常见的选项。但是 value 也可以用于那里的实际文本。 <textarea value="Something here" placeholder="Something here">Something here</textarea>

【讨论】：

请注意：“如果您想要<textarea> 的默认内容，请在开始标签和结束标签之间输入。<textarea> 不支持value 属性," (<textarea>).