如何在textarea中放置标签并在标签后键入用户

Question

我想创建一个类似textarea的输入（使用<textarea>或contentEditable="true"），其中静态文本位于不可删除范围内。用户键入的值必须从静态文本的右侧开始。

我已经有了css / html代码，但我的解决方案是我必须在textarea上硬编码文本缩进值。我怎样才能更动态地做到这一点？

这是我想要实现的目标的图片：

<div class="container">
    <h3>label :</h3>
    <textarea rows="5">Looong text</textarea>
</div>

<style>
    div.container {
    position: relative:
    width: 100%;
}    
h3 {
    position: absolute;
    margin: 0;
    text-decoration: underline;
}
textarea {
    width: 100%;
    text-indent: 50px;
}

Plunker link

Answer 1

我想不出在实际textarea中添加元素/标签的方法，所以我认为你必须使用具有contenteditable属性的div。请看下面的代码：

.editable-wrapper {
  border: 1px #ccc solid;
}

.label,
.editable { padding: 7px; }

.label {
  float: left;
  font-weight: bold;
  padding-bottom: 0;
  pointer-events:none;
}

.editable { min-height: 100px; }

<div class="editable-wrapper">
  <span class="label">Your label:</span>
  <div class="editable" contenteditable> </div>
</div>

您可能还需要一些javascript来检索并保存输入的数据。您可以将可编辑div的innerHTML复制到表单提交上的实际（隐藏）textarea，或者直接在更改/ keyup上使用ajax发布。