Html Mast Elemet

by Faisal Pathan

HTML

<h1>
Masking html element
</h1>

   <input type="text" class="form-control" placeholder="XXX-XXX-XXXX" title="XXX-XXX-XXXX" input-mask="___-___-____" id="txtRTelNumber" />

JavaScript

function InputMask(element) {
      var self = this;

      self.element = element;

      self.mask = element.attributes["input-mask"].nodeValue;

      self.inputBuffer = "";

      self.cursorPosition = 0;

      self.bufferCursorPosition = 0;

      self.dataLength = getDataLength();

      function getDataLength() {
        var ret = 0;

        for (var i = 0; i < self.mask.length; i++) {
          if (self.mask.charAt(i) == "_") {
            ret++;
          }
        }

        return ret;
      }

      self.keyEventHandler = function (obj) {
        obj.preventDefault();

        self.updateBuffer(obj);
        self.manageCursor(obj);
        self.render();
        self.moveCursor();
      }

      self.updateBufferPosition = function () {
        var selectionStart = self.element.selectionStart;
        self.bufferCursorPosition = self.displayPosToBufferPos(selectionStart);
      }

      self.onClick = function () {
        self.updateBufferPosition();
      }

      self.updateBuffer = function (obj) {
        if (obj.keyCode == 8) {
          self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition - 1) + self.inputBuffer.substring(self.bufferCursorPosition);
        }
        else if (obj.keyCode == 46) {
          self.inputBuffer = self.inputBuffer.substring(0, self.bufferCursorPosition) + self.inputBuffer.substring(self.bufferCursorPosition + 1);
        }
        else if (obj.keyCode >= 37 && obj.keyCode <= 40) {
          //do nothing on cursor keys.
        }
        else {
          var selectionStart = self.element.selectionStart;
          var bufferCursorPosition = self.displayPosToBufferPos(selectionStart);
          self.inputBuffer = self.inputBuffer.substring(0, bufferCursorPosition) + String.fromCharCode(obj.which) + self.inputBuffer.substring(bufferCursorPosition);
          if (self.inputBuffer.length > self.dataLength) {
            self.inputBuffer = self.inputBuffer.substring(0, self.dataLength);
          }
 ...