JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div class="money-picker"></div>

CSS

/* REMOVE */
body {
  background: #fff;
}
.money-picker {
  text-align: center;
  margin-top: 100px;
}
.money-picker-wrap {
  display: inline-block;
}

/* END */

.money-picker-wrap > div {
  float: left;
}
.money-picker-wrap > div,
.money-picker-wrap > div > div {
  display: inline-block;
}

.money-picker-currency-wrap {
  line-height: 121px;
  font-size: 30px;
  font-family: helvetica;
  font-weight: 300;
  margin-right: 10px;
}

.money-picker-number-wrap {
  margin: 0 2px;
}

.money-picker-number {
  /*color: #333;*/
  /*background: #f9f9f9;*/

  color: #036cd2;
  text-shadow: 1px 1px 1px #fff;
  background: #f6f6f6;

  box-shadow: inset 0px 0px 6px #ddd;
  padding: 10px;
  font-size: 30px;
  font-weight: 600;
  font-family: sans-serif;
  border: 1px solid #ccc;
  border-radius: 3px;
  text-align: center;
  width: 30px;
}
.money-picker-number:focus {
  outline: -webkit-focus-ring-color auto 3px;
}
input[type=number].money-picker-number { -moz-appearance: textfield; }
input[type=number].money-picker-number::-webkit-inner-spin-button,
input[type=number].money-picker-number::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

.money-picker-number-up,
.money-picker-number-down {
  text-align: center;
  font-size: 16px;
  padding: 10px 0;
  line-height: 0;
}

.money-picker-number-wrap:hover {
  cursor: pointer;
}

.money-picker-number-wrap:hover .money-picker-number-up,
.money-picker-number-wrap:hover .money-picker-number-down {
  background: #eee;
}

.money-picker-number-wrap:hover .money-picker-number-up .chevron:before,
.money-picker-number-wrap:hover .money-picker-number-down .chevron:before {
  color: #666;
}

.money-picker-decimal-point {
  width: 20px;
  line-height: 121px;
  font-size: 70px;
  color: #666;
}

.money-picker .chevron::before {
  border-style: solid;
  border-width: 0.25em 0.25em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  /*left: 0.15em;*/
  left: 0;
  position: relative;
  top: 0.15em;
  transform:...

JavaScript

$(document).ready(function() {
  $('.money-picker').moneyPicker({
    number_of_whole_numbers: 4,
    value: 49.95,
    onChange: function(e) {
      // console.log(e);
    }
  });
});


(function($) {

  $.fn.moneyPicker = function( options, action ) {
    var $ele = this;
    var _moneyPicker = _moneyPicker || {};

    _moneyPicker = {
      init: function() {
        if (typeof settings == "undefined") {
          console.log('init');
          this.render();
          this.handleIncrement();
          this.handleContentEdit();
          this.handleMultipleKeyPresses();
        }
      },
      getAmount: function() {
        var settings = this.getSettings($ele);

        return settings.value;
      },
      handleMultipleKeyPresses: function() {
        $($ele).find('input.money-picker-number').focus(function() {

          $(this).off('keypress');
          $(this).on('keypress', function(e) {
            var keypress = e;
            var is_highlighted = document.getSelection().type == "Range";

            e.preventDefault();

            setTimeout(function() {
              var digit = String.fromCharCode(keypress.which);
              var regex = new RegExp("^[0-9]+$");
              var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
              var is_allowed_character = regex.test(key);
              var is_more_than_one_digit = $(this).val().length > 1 || ($(this).val().length > 0 && !is_highlighted);

              if (!is_allowed_character || is_more_than_one_digit) {
                var index_of_current_digit = $('input').index($(this));
                var $next_digit = $('.money-picker-number:eq('+ (index_of_current_digit + 1) +')');

                $next_digit.trigger('focus');
                $next_digit.val(digit);
              }
              else {
                $(this).val(digit);
              }

            }.bind(this), 1);
            
          });
        });
      },
      handleIncrement: function() {
      ...