JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<input type='text' id='myNumber' data-type='number' value='-6' />
<input type='button' id='btnGetValue' value='Get Value' />
<label id='lblValue' />

JavaScript

//Override val function: See http://stackoverflow.com/questions/2059907/override-jquery-val-function
(function($) {
  var originalVal = $.fn.val;
  $.fn.val = function(value) {
    if (arguments.length >= 1) {
      // setter invoked, do processing

      return originalVal.call(this, value);
    }
    //getter invoked do processing
    if ($(this).attr('data-type') == 'number') {
      var valueToReturn = originalVal.call(this);
      return valueToReturn.replace(/\(/g, '-').replace(/\)/g, '');
    }
    return originalVal.call(this);
  };
})(jQuery);


$('document').ready(function() {
  $('[data-type=number]').blur(function() {
    $(this).val(changeNegativeToBraces($(this).val()));
  });
  $('[data-type=number]').each(function() {
    $(this).val(changeNegativeToBraces($(this).val()));
  });

  $('[data-type=number]').focus(function() {
    $(this).val($(this).val());
  });

  $('#btnGetValue').click(function() {
    $('#lblValue').text($('#myNumber').val());
  });
});

function changeNegativeToBraces(value) {
  var valueToReturn = value;

  if (valueToReturn.indexOf('-') == 0) {
    valueToReturn = valueToReturn.replace(/-/, '(') + ')';
  }
  return valueToReturn;
}