Question

＆lt; p＆gt;我有以下html：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt;＆lt; textarea cols =“20”data-val =“true”data-val-required =“需要注释字段。” id =“Note”name =“Note”onkeyup =“var element = document.getElementById（'Note'）; var counter = document.getElementById（'Note_counter'）; var characterCount = element.value.length; var remaining = 1000 - parseInt（characterCount）; if（剩余＆lt; 0）{element.value = element.value.substr（0,1000）; remaining = 0;} counter.innerHTML = remaining;“ rows =“2”style =“width：360px;”＆gt;＆lt; / textarea＆gt; ＆lt; span＆gt;＆lt; span id =“Note_counter”＆gt; 1000＆lt; / span＆gt;剩余的字符＆lt; / span＆gt; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;这包括＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;以及＆lt; code＆gt;＆lt; span＆gt;＆lt; / code＆gt;中的计数器随后的元素。我希望设置＆lt; code＆gt;＆lt; span＆gt;＆lt; / code＆gt;的绝对定位元素位于＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;的下半部分无论页面上的哪个位置都包含＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;是或者宽度/宽度。＆lt; / p＆gt; ＆lt; p＆gt;看到这个＆lt; a href =“http://jsfiddle.net/t41v0cyd/”rel =“nofollow”＆gt; jsfiddle＆lt; / a＆gt;＆lt; / p＆gt; ＆lt; p＆gt;可能有多个＆lt; code＆gt;＆lt; textarea /＆gt;＆lt; span /＆gt;＆lt; / code＆gt;页面上的组合。没有jQuery可以使用。我希望我能用css做到这一点。＆lt; / p＆gt; ＆LT; HR＆GT; ＆lt; p＆gt;编辑：＆lt; / p＆gt; ＆lt; p＆gt;我使用ASP.NET MVC中的自定义html助手创建上面的所有html元素：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; @ CustomHtml.CustomTextAreaFor（Html，model =＆gt; model.Note）＆LT; /代码＆GT;＆LT; /预＆GT;

Answer 1

最简单的方法是将textarea包装在div中并应用底部填充和相对于该位置的位置。

<div class="wrapper">
  <textarea></textarea>
  <span class="char-count">1000</span>
</div>

.wrapper{
  position:relative;
  padding-bottom:20px;
}

.char-count{
  position:absolute;
  height:20px;
  left:0;
  bottom:0;
}

您可以将跨度设置为类似于textarea的底部，这样文本就不会在视觉上溢出字符数。

Answer 2

最简单的方法是将textarea和标签包装在div中，应用相对位置并将div设置为inline-block。然后，您可以根据需要相对于文本区域定位标签。

HTML：

<div class="textarea-wrapper">
<textarea cols="20" data-val="true" data-val-required="The Note field is required." id="Note" name="Note" onkeyup="var element = document.getElementById('Note'); var counter = document.getElementById('Note_counter'); var characterCount = element.value.length;  var remaining = 1000 - parseInt(characterCount); if (remaining < 0) { element.value = element.value.substr(0, 1000); remaining = 0; } counter.innerHTML = remaining;" rows="2" style="width: 360px;"></textarea>
<span id="Note_counter_label"><span id="Note_counter">1000</span> characters remaining</span>
</div>

CSS：

.textarea-wrapper {
   position: relative;
   display: inline-block;
}

我已更新您的the source

Answer 3

如上所述，使用div来包装textarea和span。您的texarea有一个css height，因此将div添加到position:relative，span的添加顶部等于textarea高度(top:100px)。具有绝对位置的元素与其父元素相比具有position:relative

的位置

将<span>绝对位于<textarea>

3 个答案: