将文本在文本框的下方和右侧对齐

Question

我试图显示可调整大小的文本框的字符限制并将其与框的右下角对齐，就像链接中的图像一样（）。但是，我找不到一种方法来使其成为可能。我不能将文本向右对齐，因为文本框不会从页面左侧延伸到右侧，而仅包含在页面的一部分中。这个问题源于文本框如何根据浏览器窗口大小和人们的显示器分辨率设置来调整大小。我的项目是在 ASP.NET 结构中完成的，并使用 bootstrap 来对齐 div。如何才能使字符限制的文本始终位于可调整大小的文本框的右侧下方，即使在调整文本框大小时也是如此？

Answer 1

通常，您可以将文本框和字符限制指示器放置在容器内，然后将字符限制指示器在该容器内向右对齐。

const recalcLength = ta => {
  ta.nextElementSibling.innerHTML = ta.value.length + ' / ' + ta.maxLength
}
document.querySelectorAll('textarea').forEach(ta => {
  recalcLength(ta)
  ta.addEventListener('keypress', evt => {
    recalcLength(evt.target)
  })
})

body, textarea {
  font-family: sans-serif;
  font-size: 16px;
}

body {
  background: #eee;
}

.d1 {
  width: 50%;
  margin: 0 auto;
  background: white;
  margin-bottom: 2em;
}

textarea {
  width: 100%;
  height: 5em;
  padding: 5px;
  box-sizing: border-box;
}

p {
  margin: 0;
  font-size: 10px;
  text-align: right;
}

<div class="d1">
  <textarea maxlength="50">Lorem ipsum dolor sit amet</textarea>
  <p class="count"></p>
</div>

<div class="d1">
  <textarea maxlength="100">Etiam ullamcorper velit vitae sem pulvinar, dignissim efficitur nulla interdum </textarea>
  <p class="count"></p>
</div>