Как добавить постоянный текст до того, как пользователь введет текст в html textarea?

Question

Я хочу добавить постоянный текст в html textarea, прежде чем пользователь введет текст, как в cmd, где путь написан, прежде чем писать какой-либо код.Как мне этого добиться?

Answer 1

Ну, насколько я знаю, нет встроенной функциональности для того, что вы хотите.

Но, сочетая несколько вещей, мы можем достичь чего-то близкого к этому.

хитрость:

• Оберните текстовую область в div тег
• . Используйте ::before псевдоэлемент для данного div, чтобы добавить и расположить фиксированный текст
• Используйте свойство text-indent css на textarea, чтобы освободить место для нашего фиксированного текста :)

#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

Вы можете достичь этого с помощью 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 3

Чтобы получить текст в текстовой области, вы можете сделать это:

<textarea>Insert permanent text here</textarea>

Текст-заполнитель позволит пользователю печатать поверх него, который не является постоянным.

Answer 4

Атрибут заполнителя является наиболее распространенной опцией для ввода и текстовой области. Но значение также может быть использовано для реального текста там. <textarea value="Something here" placeholder="Something here">Something here</textarea>

Answer 5

Вот пример, чтобы иметь текст перед вводом текста или текстовой области:

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

Answer 6

Используйте атрибут заполнителя как таковой:

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