【问题标题】:Wrap the textarea around a HTML element将 textarea 包裹在 HTML 元素周围
【发布时间】:2014-06-11 08:58:56
【问题描述】:

有什么方法可以将 textarea HTML 元素包裹在 HTML 元素周围?就我而言,我想将 textarea 包裹在标签周围。

这是我试图实现的目标:

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

其中 * 是文本区域。

【问题讨论】:

  • @Salman A,感谢您的编辑,我努力让它看起来像这样
  • 不清楚你想要什么,textarea看起来像一个矩形块,它不能被视为内联元素。

标签: html css textarea


【解决方案1】:

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

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

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>

【讨论】:

  • 比我快 2 分钟!
  • @SalmanA 非常接近!我打算对问题进行与您相同的编辑,但您的速度比之前快^^
  • 哇,它起作用了,我对那个 text-indent 属性一无所知。谢谢!
【解决方案2】:

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

类似这样的:

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

之后你只需要用css排列你的标签和div,并将div内的信息(不包括标签)用作文本框内的文本。

这里有一个jsfiddle 来看看它是如何工作的。

【讨论】:

  • @Nisha 谢谢,我尽量避免定位,以防止它在谁知道什么浏览器/操作系统上出错。但我承认其他答案没有刮掉一些文字的问题。
  • CSS 解决方案非常可靠,我想将它用于不允许我这样做的 Drupal 网站,但还是谢谢你!
【解决方案3】:

我不确定 text-indent 属性在 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;
}

【讨论】:

    【解决方案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;    
    }
    

    输出

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多