我将计数器放在CSS的文本区域的右上角:

   position: absolute;
   @include right(pxToRem(5));
   bottom: pxToRem(45);
   font-family: $font-family-regular;
   color: $text-color-grey-8;
   font-size: $font-size-12;


使用HTML:

<textarea
placeholder{{translationService.translate('REPORT_ADD_COMMENT')}}"
ngControl="comment" #comment="ngForm"
[attr.maxlength]="maxLengthReportPost"></textarea>
<span class="form__textarea-counter">{{showCharCounter()}}</span>


用于textarea的CSS:

min-height: pxToRem(80);
line-height: pxToRem(21);
padding-top: pxToRem(3);
padding-right: pxToRem(13);


作为结果,当开始键入并靠近计数器时,即使在下面,也非常接近计数器


我如何才能强制计数器和文本之间


请没有jQuery

最佳答案

您可能会发现这很有用,我知道这不是100%完整的证明,但也许可以帮到您



textarea{
  resize: none;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  padding-right: 20px;
}
span{
  position: absolute;
  bottom: 5px;
  right: -15px;
}
.textarea-holder{
  position: relative;
  width: 200px;
}

<div class="textarea-holder">
  <textarea>
  </textarea>
  <span>11</span>
</div>

关于html - 绝对位置元素和另一个元素之间的力空间,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43807833/

10-09 19:21
查看更多