JSFiddle - React, Tailwind, and code Playground

by GGaritaJ

HTML

<script src="https://www.ggaritaj.com/"></script>
<script src="https://github.com/GGaritaJ/ggAbbreviationMasks"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="ggAbbreviationMasks" />
    <meta name="author" content="Ing.Gerardo Garita Juarez" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-Xss-Protection" content="'1; mode=block' always">
    <meta http-equiv="X-Content-Type-Options" content="'nosniff' always">
    <title>jQuery Plugin ggAbbreviationMasks</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  </head>

  <body>

    <div id="mainContainer">

      <!-- CONTENT : START -->
      <div class="container">

        <div id="txtMoneyPrimaryContainer" class="thousandsMask myContainer">
          <div class="Abbrev money" abbrev-content="$"></div>
          <input type="text" id="txtMoneyPrimary" class="thousandsMask myStyle" />
        </div>

        <div id="txtMoneyAltContainer" class="thousandsMask myContainer">
          <div class="Abbrev moneyAlt" abbrev-content="₡"></div>
          <input type="text" id="txtMoneyAlt" class="thousandsMask myStyle" />
        </div>

        <div id="txtAreaContainer" class="Abbrev area myContainer" abbrev-content="m2">
          <input type="text" id="txtArea" class="myStyle" />
        </div>

        <div...

CSS

#mainContainer {
  padding: 20px;
}

.myContainer {
  margin-bottom: 20px;
}

.custom:before {
  right: 90px;
}

.custom input,
.custom select {
  padding-right: 90px !important
}

input.myStyle,
select.myStyle {
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: 400;
  border: 2px #DDDDDD solid !important;
  -webkit-transition: border-color ease-in-out .15s, 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;
  width: 100%;
  height: 40px !important;
  border-radius: 0px !important;
  max-height: 48px;
  padding: 0px 10px;
  color: #888;
  font-size: 16px;
  background: #FFFFFF;
  vertical-align: middle;
  outline: 0;
  overflow: hidden;
  text-align: right;
}

input.myStyle:focus,
select.myStyle:focus {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
  color: #EA8B2C !important;
  outline: 0px;
}

input.myStyle:hover,
select.myStyle:hover {
  border-color: #BCBCBC !important;
}

select.myStyle option {
  background-color: #F9F9F9;
  color: #666;
  cursor: pointer;
}

select.myStyle option:checked {
  color: #E98A2C !important;
}

/*////////////////////////////////////////////
//  ggAbbreviationMasks JS/CSS  PlugIn V1.0 //
//  Developed by: Ing.Gerardo Garita J.     //
//                FullStack Developer       //
//  email:  [email protected]               //
//  date:       wednesday, 2018-08-19       //
//  last date:  wednesday, 2018-08-19       //
////////////////////////////////////////////*/

/* UNIT ABBREVS : START */

.Abbrev {
  position: relative;
}

.Abbrev:before {
  height: 40px !important;
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  color: #888;
  margin-top: 10px;
  padding-left: 10px;
  cursor: text;
  z-index: 100;
  right: 35px;
  width: 0px;
  height:...

JavaScript

$(document).ready(function() {
  $("div.Abbrev").ggAbbreviationMasks().Abbreviation({
    abbreviations: ["area", "weight", "percentage", "distance", "precipitation", "temperature", "altitude", "velocity", "time", "latitude", "longitude", "money", "moneyAlt", "custom"]
  });
  $("div.thousandsMask").ggAbbreviationMasks().ThousandsMask({
    thousandseparator: ",",
    decimalseparator: ".",
    decimals: 2
  });
});

//////////////////////////////////////////////
//  ggAbbreviationMasks JS/CSS  PlugIn V1.0 //
//  Developed by: Ing.Gerardo Garita J.     //
//                FullStack Developer       //
//  email:  [email protected]               //
//  date:       wednesday, 2018-08-19       //
//  last date:  wednesday, 2018-08-19       //
//////////////////////////////////////////////
;
(function($) {
  jQuery.fn.ggAbbreviationMasks = function() {
    return this;
  };
  jQuery.fn.ggAbbreviationMasks().Abbreviation = function(opts) {
    try {
      var _abbreviations = ["area", "weight", "percentage", "distance", "precipitation", "temperature", "altitude", "velocity", "time", "latitude", "longitude", "money", "moneyAlt", "custom"];
      if ((opts != undefined) && (opts != null) && (opts !== "")) {
        if (opts.hasOwnProperty('abbreviations')) {
          _abbreviations = opts.abbreviations;
        }
      }
      $(_abbreviations).each(function(id, abbrev) {
        var item = $(('.' + abbrev))[0];
        var content = $(item).attr("abbrev-content");
        var appendStyle = ('<style>.' + abbrev + ':before { content: "' + content + '" !important }</style>');
        $(appendStyle).insertAfter(item);
      });
    } catch (err) {
      console.log("Error: " + err + ".");
    }
  };
  jQuery.fn.ggAbbreviationMasks().ThousandsMask = function(opts) {
    try {
      //initial values
      var _tseparator = ",";
      var _dseparator = ".";
      var _decimals = 2;
      if ((opts != undefined) && (opts != null) && (opts !== "")) {
        if...