javascript - 将 绝对定位在 <textarea> 的底部

Question

我有以下 html:

<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><span id="Note_counter">1000</span> characters remaining</span>

这包括一个 <textarea>和 <span> 中的一个计数器后面的元素。我想设置 <span> 的绝对定位元素位于 <textarea> 的底部无论<textarea> 在页面的哪个位置是或多宽/多窄。

查看此 jsfiddle

可能有多个 <textarea/><span/>页面上的组合。不能使用 jQuery。我希望我可以只用 css 做到这一点。

---

编辑:

我在 ASP.NET MVC 中使用自定义 html 帮助器创建了上面的所有 html 元素:

@CustomHtml.CustomTextAreaFor(Html, model => model.Note)

Answer 1

最简单的方法是将文本区域包裹在一个 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;
}

您可以将跨度设置为看起来像文本区域的底部，这样文本永远不会在视觉上溢出字符数。