Question

我想在用户输入任何代码之前在用户输入cmd之类的文本之前在html textarea中添加永久文本。我该如何实现？

Answer 1

据我所知，您所需的功能没有内置功能。</ p>

但是，结合几件事，我们可以实现一些接近目标的事情。

诀窍是：

将文本区域包裹在div标记内
在给定的::before上使用div伪元素来添加和放置固定文本
在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 2

要在文本区域中获取文本，可以执行以下操作：

<textarea>Insert permanent text here</textarea>

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

Answer 3

您可以使用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>

Answer 4

按如下方式使用占位符属性：

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

Answer 5

以下是在输入内容或文本区域中进行任何键入之前先输入文本的示例：

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

Answer 6

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

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

6 个答案: