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

Question

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

Answer 1

这样使用占位符属性：

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

Answer 2

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

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

Answer 3

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

<textarea>Insert permanent text here</textarea>

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

Answer 4

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

Answer 5

嗯，据我所知，built-in 没有您想要的功能。

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

诀窍是：

将文本区域包裹在 div 标签中
在给定的div上使用::beforepseudo-element来添加和定位固定文本
在 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>

Answer 6

你可以用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>

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

How do I add permanent text before user enters a text in html textarea?

html

javascript

css

textarea