如何将文本添加到文本区域右下角的文本区域？答案

【问题标题】：How can I add text to a text area at the bottom right of the text area?如何将文本添加到文本区域右下角的文本区域？
【发布时间】：2017-02-06 11:56:06
【问题描述】：

我想向用户显示他们还剩下多少允许输入的字符，我想把它放在文本区域的右下角，换行之后；无论如何，在文本区域发生变化后刷新它。我只是需要帮助将其放置在上述位置。

【问题讨论】：

标签： javascript jquery jquery-ui textarea

【解决方案1】：

function countChar(val){
     var len = val.value.length;
	 
     if (len >= 50) {
              val.value = val.value.substring(0, 50);
     } else {
              $('#charNum').text(50 - len);
     }
};

.main{
  position: relative;  
  display: inline-block;
}
.main textarea{
  height: 100px; 
  width: 100px;
  resize: none;
}
.main span{
  color: coral;
  position: absolute;  
  bottom: 5px;
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <textarea class="textareatest" onkeyup="countChar(this);"></textarea>
  <span id="charNum">50</span>
</div>

【讨论】：

这是你所期待的
非常感谢。我太专注于操作文本区域 inside 的文本，并没有想到在外部添加 div 并使用绝对定位...这基本上是这样，但我正在使文本区域看起来像单行输入，我需要在显示数字时在底部出现一个换行符（它显示在 x 个字符之后），并保持不变，直到文本在限制范围内；抱歉，如果上面不是 100% 清楚。如何在底部保留一个新行，以便 textarea 中的文本不会崩溃到 charNum？一个很好的例子是 quora 的问题字段。
我想出了最后一部分；我只是要增加文本区域的填充以创建“换行符”。感谢您的回答;我不知道为什么人们会向每个人投反对票……我给了每个人 1+ 以抵消这一点。
一些将其用作 Jaigus 的有趣区域，人们不知道仅遭受反对票的重要性，否则他们会要求对问题进行清晰的描述。

【解决方案2】：

你可以这样做：

<div class="form-block">
   <textarea></textarea>
   <div class="label"></div>
</div>

在 CSS 中：

.form-block {
  position: relative;
}

.label {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

【讨论】：

【解决方案3】：

可以通过这样的方式实现。

function count(){
  document.getElementById('textarea').onkeyup = function () {
  document.getElementById('count').innerHTML = this.value.length;
};
  }

.main{
  position: relative;  
  display: inline-block;
}
.main textarea{
  height: 100px; 
  width: 200px;
  resize: none;
}
.main span{
  color: coral;
  position: absolute;  
  bottom: 5px;
  right: 5px;
}

<div class="main">
  <textarea id="textarea" onclick="count()"></textarea>
  <span id="count">0</span>
</div>

【讨论】：

【解决方案4】：

使用 bootstrap 和 jquery 制作。

<div style="margin-top:45px; margin-left:45px">
<form>
  <div class='row'>
    <div class='col-sm-3'>
      <div class='textCountContianer'>
    <label>Some Text</label>
    <div class="count">0/250</div>
    <textarea class='form-control' type="text" maxlength="250"></textarea>
      </div>
    </div>
  </div>
</form>
</div>

CSS

.count{
position: absolute;
    bottom: 1px;
    right: 10px;
  color:gray
}
.textCountContianer{
  position: relative;
}

JQUERY

$('textarea').keyup(function(e) {
  var textlen = $(this).attr('maxlength') - $(this).val().length;
  $(this).parent().find('.count').html('<span>'+$(this).val().length+'/'+$(this).attr('maxlength')+'</span>');
});

演示 https://codepen.io/badevellis/pen/mdwWXLq

【讨论】：