显示字数，＆＃39;内部＆＃39; HTML Textarea元素

Question

我希望将一个char-count值嵌套在HTML文本区域中，就像下面的图像一样。我仍然是Js的新秀，所以任何建议都非常受欢迎。我已经做了一些挖掘，并且真的遇到了任何可以帮助我的东西。

由于我无法直接访问CSS或HTML文件，因此必须通过Js定位这些元素。我的问题是可以像下面这样的图像，完全用Js完成吗？如果是这样我从哪里开始？

元素ID＆＃39;是= 'desinp' 我现在将JsFiddle的所有内容包括在内。

Answer 1

要在JavaScript中完全执行此操作，您必须动态更改HTML，并在正确的位置插入适当的元素，然后添加事件处理程序等。

var wrapper = document.createElement('div');
var text    = document.getElementById("desinp");
var c_wrap  = document.createElement('div');
var count   = document.createElement('span');

wrapper.style.position = 'relative';
c_wrap.style.position = 'absolute';
c_wrap.style.bottom = '8px';
c_wrap.style.color = '#ccc';
c_wrap.innerHTML = 'Char :';

text.parentNode.appendChild(wrapper);
wrapper.appendChild(text);

c_wrap.appendChild(count);
wrapper.appendChild(c_wrap);

text.style.color = "#ccc";
text.style.resize = "none";
text.style.height = "auto";
text.rows = "3";

function _set() {
	c_wrap.style.left = (text.clientWidth - c_wrap.clientWidth - 12) + 'px';
	count.innerHTML = this.value.length || 0;
}

text.addEventListener('input', _set);
_set.call(text);

<!-- textarea. -->
<textarea style="width: 364px; height: 149px;" class="required" id="desinp" name="desinp" maxlength="150"></textarea>

Answer 2

我添加了一个Javascript片段，可以计算剩余的字符数，如果要显示输入的字符总数，可以添加字符，可以根据需要设计元素。其余代码来自你的小提琴。

// Char limit.
function maxLength(el) {
  if (!('maxLength' in el)) {
    var max = el.attributes.maxLength.value;
    el.onkeypress = function() {
      if (this.value.length >= max) return false;
    };
  }
}

maxLength(document.getElementById("desinp"));

document.getElementById('desinp').onkeyup = function () {
  document.getElementById('count').innerHTML = "Characters left: " + (150 - this.value.length);
};

// Element style over-ride.
document.getElementById("desinp").style.color = "#ccc";
document.getElementById("desinp").style.resize = "none";
document.getElementById("desinp").style.height = "auto";
document.getElementById("desinp").rows = "3";

<!-- textarea. -->
<textarea style="width: 364px; height: 149px;" class="required" id="desinp" name="desinp" maxlength="150" ></textarea>
<span id="count"></span>