提问人：Andrew C 提问时间：10/17/2023 最后编辑：Andrew C 更新时间：10/18/2023 访问量：70
将文本框下方和右侧对齐
Align text below and to the right of a text box
问：
我正在处理一个 ASP.NET 项目，其中包含一个可调整大小的文本框，该文本框需要在框的下方和右侧显示字符限制。文本框包含在页面的特定部分内，不会从左侧延伸到右侧。 由于文本框会根据浏览器窗口大小和显示器分辨率设置调整大小， 我在正确对齐字符限制文本方面遇到了困难。
我尝试将文本向右对齐，但它没有按预期工作。 如何实现始终在可调整大小的文本框下方和右侧显示字符限制文本的预期行为，即使正在调整框大小？
我正在使用 Bootstrap 在我的项目中对齐 div。
---更新---
以下是我的代码和它们通常使用的脚本的一些示例：
// EXAMPLE 1
<div class="col-md-3 mb-3 ml-2">
@Html.EditorFor(m=> m.Title, new { htmlAttributes = new { @class = "form-control characterlimit", @maxlength = 128 } })
<div class="text-muted col-md-11 mb-3 ml-4 position-absolute" style="font-size: 12px; text-align:right">128 Character Limit</div>
</div>
// EXAMPLE 2
<div class="col-md-6 mb-3 ml-2">
@Html.TextAreaFor(m => m.Description, new { @class = "form-control characterlimit", @rows = 3, @maxlength = 2500 })
<div class="text-muted col-md-3 mb-3 ml-0 position-absolute" style="font-size: 12px; text-align:right">2500 Character Limit</div>
</div>
<script>
$(".characterlimit").keyup(function () {
var box = $(this);
var max = box.attr("maxlength")
var len = box.val().length;
box.next().text((max - len) + " Characters Left");
});
</script>
答：
0赞
Brett Donald
10/17/2023
#1
通常，应将文本框和字符限制指示器放在容器内，然后在该容器内将字符限制指示器向右对齐。
const recalcLength = ta => {
ta.nextElementSibling.innerHTML = (ta.maxLength - ta.value.length) + ' characters left'
}
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;
}
.s1 {
margin: 0 auto;
background: white;
margin-bottom: 2em;
display: inline-block;
max-width: 100%;
}
textarea {
width: 600px;
height: 5em;
padding: 5px;
box-sizing: border-box;
max-width: 100%;
}
p {
margin: 0;
font-size: 10px;
text-align: right;
}<span class="s1">
<textarea maxlength="50">Lorem ipsum dolor sit amet</textarea>
<p class="count"></p>
</span>
<br>
<span class="s1">
<textarea maxlength="100">Etiam ullamcorper velit vitae sem pulvinar, dignissim efficitur nulla interdum </textarea>
<p class="count"></p>
</span>评论
0赞
Andrew C
10/17/2023
感谢您的回答，但是当我尝试拉伸文本框或调整浏览器大小时，字符数的位置不会调整。这就是我寻求帮助的问题。
0赞
Brett Donald
10/18/2023
我改进了答案中的片段。容器现在使用 和 设置样式。我想你会发现它现在对调整文本框大小和调整浏览器大小都是完全响应的。display: inline-blockmax-width: 100%
0赞
Andrew C
10/25/2023
这个答案帮助我解决了我的问题。我忘记了 max-length 样式属性。
评论