如何將文本添加到文本區域右下角的文本區域？

Question

我想向用戶顯示他們還有多少允許輸入的字符，我想將它放在文本區域中，在右下角，在新行之后； 在 textarea 無論如何改變后刷新它。 我只是需要幫助將其放置在所述位置。

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

它可以通過這樣的東西來實現。

 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 3

你可以這樣做：

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

在 CSS 中：

.form-block {
  position: relative;
}

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

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