将textarea包装在HTML元素周围

Question

有什么办法可以在HTML元素周围包含textarea HTML元素吗？在我的情况下，我想将textarea包裹在标签周围。

这是我努力实现的目标：

Label name: *********
*********************
*********************

*是文本区域。

Answer 1

您无法在<textarea>内使用 HTML 标签，但您可以使用绝对定位将标签放置在所需位置。

然后，您可以使用 CSS text-indent属性（more info on MDN）来偏移textarea的第一行，这样标签就不会重叠它。

＆＃13;

＆＃13;

div {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  width: 115px;
  line-height: 1em;
}

textarea {
  text-indent: 120px;
  margin: 0;
  line-height: 1.2em;
}

＆＃13;

<div>
  <label>This is the label :</label>
  <textarea cols="30" rows="10"></textarea>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以尝试将标签放在div元素中，使div可编辑并使标签不可编辑...

这样的事情：

<div onClick="this.contentEditable='true';">
  <label onClick="this.contentEditable='false';">text 1</label>
  text 2
</div>

之后，您只需要使用css排列标签和div，并使用div中的信息（标签除外）作为文本框内的文本。

这是一个jsfiddle，可以看看它是如何运作的。

Answer 3

我不确定text-indent属性在textarea元素上的效果如何。如果它运作良好，你可以这样做：

• 使用定位将标签与textarea的左上角对齐并设置固定宽度
• 使用text-indent属性缩进textarea中的第一行文本

Demo here

<div class="position-helper">
    <label>Label name:</label>
    <textarea></textarea>
</div>

.position-helper {
    position: relative;
}
.position-helper label {
    position: absolute;
    left: 1px;
    top: 1px;
    background-color: #F0F0F0;
    /* font-size normalized so that em values match */
    font-size: 16px;
    width: 10em;
}
textarea {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    /* font-size normalized so that em values match */
    font-size: 16px;
    text-indent: 10em;
}

Answer 4

使用text-indent属性。根据您的要求修改text-indent值。

<强> HTML：

<div>
    <label><b>Label name:</b></label>
    <textarea name="textarea1" id="" cols="30" rows="10" placeholder="PlaceHolder Text For the Text Area"></textarea>
</div>

<强> CSS：

div 
{
    position:relative;
}
label {
    position:absolute;
    top:0;
    left:0;
    border:0;
}
textarea {
    text-indent:90px;
    margin:0;
     border:1px solid blue;    
}

<强>输出