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

Question

我想向用户显示他们还有多少允许键入的字符，我想将其放在文本区域中，右下角，在新行之后;无论如何，在文本区域更改后刷新它。我只需要帮助将其放置在所述位置。

Answer 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>

Answer 2

你可以做这样的事情：

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

在 CSS 中：

.form-block {
  position: relative;
}
.label {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

Answer 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>

Answer 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;
}

简讯

$('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