Js Char Count / Restrict.

Restrict char entry & Notify of char left. (nested).

HTML

<!-- container. -->
<div id="cont">
  <p id="print">0</p>
  <!-- textarea. -->
  <textarea style="width: 364px; height: 149px;" class="required" id="oneinp" name="oneinp" maxlength="500">Hello World!</textarea>

  <!-- textarea. -->
  <textarea style="width: 364px; height: 149px;" class="required" id="twoinp" name="twoinp" maxlength="1000">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lobortis sapien. Nullam est nisl, rutrum id molestie vitae, tincidunt vitae mi. Sed ante nulla, congue luctus scelerisque id, sagittis eget mi. Donec justo orci, condimentum eu ipsum
    vel, commodo porttitor diam. Duis pharetra, orci tempor hendrerit mattis, diam erat posuere purus, in vestibulum ligula libero tempor tortor. Etiam at mauris enim. Nam gravida porta quam non varius. Morbi nec ante elit. Nam ut odio libero. Ut mollis
    molestie leo. Pellentesque sem lectus, tincidunt ac mi eu, mattis posuere sem. Fusce sagittis ex sed dolor viverra iaculis. Quisque malesuada sodales arcu vitae lobortis. Duis ultrices maximus tortor sed consequat. Proin id sem euismod justo consectetur
    posuere id pharetra erat. Duis porta turpis felis, non fringilla purus tristique et. In dictum velit non lorem tincidunt, non malesuada ante luctus.In dictum velit non lorem tincidunt, non malesuada ante luctus.</textarea>

  <!-- textarea. -->
  <textarea style="width: 364px; height: 149px;" class="required" id="threeinp" name="threeinp" maxlength="1500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu lobortis sapien. Nullam est nisl, rutrum id molestie vitae, tincidunt vitae mi. Sed ante nulla, congue luctus scelerisque id, sagittis eget mi. Donec justo orci, condimentum eu ipsum
    vel, commodo porttitor diam. Duis pharetra, orci tempor hendrerit mattis, diam erat posuere purus, in vestibulum ligula libero tempor tortor. Etiam at mauris enim. Nam gravida porta quam non varius. Morbi nec ante elit. Nam ut odio libero. Ut mollis
    molestie leo....

CSS

#cont {
  position: relative;
  background: #ccc;
  width: 364px;
  padding: 1em
}

textarea {
  position: relative;
}

JavaScript

var count = document.getElementsByTagName("textarea");

var TextAreaRanger = function(input) {

  this.MAX = parseInt(input.getAttribute("maxlength"));
  this.INPUT = input;

  // strip unwanted white space
  input.value = input.value.replace(/\s+/g, " ").trim();

  // 'update' function reference
  var update = this.update.bind(this);

  // add input events
  input.oncut = update;
  input.onpaste = update;
  input.onkeydown = update;
  input.onkeyup = update;

  // create wrapper element
  this.wrapper = document.createElement("div");
  this.wrapper.innerHTML = 'Chars left: <span id="int">' + (this.MAX - input.value.length), '</span>';

  // input parent element (stylize)
  var ipar = input.parentNode;
  input.style.color = "#333";
  input.style.resize = "none";
  input.style.height = "auto";
  input.rows = "3";

  // find input's i
  for (var i = 0, el; el = ipar.children[i]; i++) {
    if (el === input) break;
  };
  
  ipar.toString();
  document.getElementById("print").innerHTML = i;

  // append wrapper below the input
  if (ipar.children[++i]) {
    ipar.insertBefore(this.wrapper, ipar.children[i]);
  } else ipar.appendChild(this.wrapper);

  // stylize wrapper
  this.wrapper.style.position = "relative";
  this.wrapper.style.color = "#444";
  this.wrapper.style.fontSize = "11px";
  this.wrapper.style.textAlign = "right";
  this.wrapper.style.margin = ".5em";
  // this.wrapper.style.left = (input.offsetLeft + (input.offsetWidth - 85)) + "px";
  // this.wrapper.style.top = (-parseInt(this.wrapper.style.fontSize) * 2) + "px";

  // check counter value
  var tail = document.getElementById("int");

  if (this.MAX - this.INPUT.value.length <= 50) {
    tail.style.color = "#ffa";
  } else if (this.MAX - this.INPUT.value.length <= 0) {
    tail.style.color = "#f00";
  }

};

// update the counter
TextAreaRanger.prototype["update"] = function() {
  this.wrapper.innerHTML = 'Chars left: <span id="int">' + (this.MAX - this.INPUT.value.length), '</span>';
};

for (var...