将文本区域包裹在一个HTML元素周围

Question

有没有办法将textarea HTML元素包裹在另一个HTML元素周围？在我的情况下，我想要将textarea包裹在label标签周围。

这是我想要实现的效果：

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

在这里，* 表示文本区域。

- Canutza

---

@Salman A，感谢您的编辑，我一直在努力让它看起来像那样。 - Canutza

不清楚你想要什么，文本区域看起来像一个带有矩形形状的块，它不能被视为内联元素。 - King King

Answer 1

你不能在 <textarea> 中使用 HTML 标签，但是你可以使用绝对定位将标签放置在所需位置。

然后，你可以使用 CSS 的 text-indent 属性（更多信息请参见MDN）来偏移文本区域的第一行，以避免标签与其重叠。

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;
}

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

- web-tiki

---

比我快了2分钟！ - Salman A

@SalmanA 非常接近了！我也想在问题上进行同样的编辑，但你比我快 ^^ - web-tiki

哇，它起作用了，我对text-indent属性一无所知。谢谢！ - Canutza

Answer 2

你可以尝试将标签放在一个 div 元素中，使该 div 具有可编辑性，而使标签不可编辑...

就像这样：

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

接下来，您只需要使用css排列您的标签和div，并使用div内部（不包括标签）的信息作为文本框内的文本。

这里有一个jsfiddle，可以查看它是如何工作的。

- Catalin Deaconescu

---

@Nisha 谢谢，我尽量避免使用定位，以防止在某些浏览器/操作系统上出现问题。但我承认其他答案没有必要抓取一些文本的问题。 - Catalin Deaconescu

CSS的解决方案非常可靠，我想在一个Drupal网站上使用它，但是无论如何感谢你！ - Canutza

Answer 3

我不确定text-indent属性在文本区域元素上的表现如何。如果足够好，您可以这样做：

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

此处演示

<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;
}

- Salman A

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;    
}

OUTPUT

- ngrashia