Mascaras Input

by Marcos vini

HTML

<div class='panel'>

<form  method="post"> 
<label>Real:
<input type='text' name='texto' placeholder='0,00' class='moeda'>
</label>
<label>Cep:
<input type='text' name='texto' placeholder='00000-000' class='cep somentenumeros'></label>
<label>somente Numeros:
<input type='text' name='texto' placeholder='0123456789' class='somentenumeros'></label>
<label>somente letras:
<input type='text' name='texto' placeholder='ABCDEFGHIJ' class='somenteletras'></label>
<label>Celular:
<input type='text' name='texto' placeholder='(00) 0000-0000' class='celular'></label>
</form>
</div>

CSS

::focus{
  outline:none;
}
.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    max-width:450px;
}
input[type='text']:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #19b9e7 #17b0dc !important;
    outline: none;
    -webkit-transition: linear 0.5s;
    transition: linear 0.5s;
    -moz-transition: linear 0.5s;
    -ms-transition: linear 0.5s;
    -o-transition: linear 0.5s;
}
input[type='text']{
      position: relative;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    border-radius: 0px !important;
    color: #999 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}
input[type='button']{
      float: left;
      display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
   ...

JavaScript

(function(d) {
  "use strict";

  function $(e) {
    return d.querySelectorAll(e);
  }

  Object.prototype.on = function(t, e) {
    this.forEach(function(x) {
      if (x.addEventListener) {
        x.addEventListener(t, e);
      } else if (x.attachEvent) {
        x.attachEvent("on" + t, e);
      }
    });
  };

  const MASCARAS = {
    moedas: function(e) {
      let val, temp, neg;
      [val, temp, neg] = [e.value, e.value + '', false];
      console.log(val);
      temp = parseInt(temp.replace(/\D/g, ""));
      if (isNaN(temp)) temp = 0;
      temp = temp + '';
      if (val.indexOf("-") === 0) {
        neg = true;
        temp = temp.replace("-", "");
      }
      if (temp.length === 1) temp = "0" + temp;
      temp = temp.replace(/([0-9]{2})$/g, ",$1");
      if (temp.indexOf("-") === 0) {
        neg = true;
        temp = temp.replace("-", "");
      }
      if (temp.length > 6) temp = temp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
      if (temp.length > 9) temp = temp.replace(/([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g, ".$1.$2,$3");
      if (temp.length > 12) temp = temp.replace(/([0-9]{3}).([0-9]{3}).([0-9]{3}),([0-9]{2}$)/g, ".$1.$2.$3,$4");
      if (temp.indexOf(".") === 0) temp = temp.replace(".", "");
      if (temp.indexOf(",") === 0) temp = temp.replace(",", "0,");
      e.value = (neg ? '-' + temp : temp);
    },
    cep: function(e) {
      e.value = e.value.replace(/^(\d{5})(\d)/, "$1-$2");
    },
    somenteletras: function(e) {
      e.value = e.value.replace(/[^a-zA-Z]/g, '');
    },
    somentenumeros: function(e) {
      e.value = e.value.replace(/[^0-9]/g, '');
    },
    celular: function(e) {
      let v;
      v = e.value.replace(/^(\d\d)(\d)/g, "($1) $2");
      e.value = v.replace(/(\d{4})(\d)/, "$1-$2");
    },
    cpfecpnj: function(e) {
      // Debes completar esta función según tus necesidades
    }
  };

  $('.moeda').on("keyup", function() {
    MASCARAS.moedas(this);
  });

  $('.cep').on("keyup", function() {
   ...