Replacing if the first number is a zero and the number is greater than 2 places

Question

I have a calculator I'm working on and came across a problem. To combat so that users can't leave a field blank, I'm forcing a zero if the field is left empty. That's all fine, but the problem is that when the text in the field is deleted to remove the zero and enter a new number, it automatically enters zero so my new number looks like this: 05

How do i run a replace where if there is more than 2 places in the number and the first number is zero, replace the zero? Here's the code i'm using for my calculator.

$(function(){

  calculate();

$('.input').keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
               return false;
    }
   });

  $('.input').on('keyup',function(){
    if($(this).val()==''){
      $(this).val('0');
    }
    calculate();
  });

});

function calculate(){

  var d6 = parseFloat(($('#d6').val()).replace(/,/g,''));
  var d20 = parseFloat(($('#d20').val()).replace(/,/g,''));
  var b20 = d6;
  var e20 = parseFloat(($('#e20').val()).replace(/,/g,''));

  var f20 = d20*e20;
  var f22 = b20/f20;
  var f23 = (52-f22)*f20;

  $('#f20').html(formatCurrency(f20));
  $('#f22').html(f22.toFixed(2));
  $('#f23').html(formatCurrency(f23));

}

function formatCurrency(x) {
    return '$'+x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}

if(str.length > 1 && str[0] == "0") { str=str.substring(1,str.length) } — juvian, Aug 28 '15 at 18:06
possible duplicate: http://stackoverflow.com/questions/594325/truncate-leading-zeros-of-a-string-in-javascript — chrismilleruk, Aug 28 '15 at 18:12
@juvian the second check is unnecessary I think. According to what he said the 0 is always being prepended. — Onilol, Aug 28 '15 at 18:12
@Onilol if you check the code, he changes '' to '0', so after a while the .val() will be '12', without a 0 — juvian, Aug 28 '15 at 18:15

score 1 · Answer 1 · answered Aug 28 '15 at 18:14

1

Change the zeroing code to use the blur() event, i.e when the field loses focus.

$('.input').blur(function(){ if($(this).val()=='') { $(this).val('0'); } });

answered Aug 28 '15 at 18:14

Oskari Mantere

192
1
6

I don't think this is what he asked. – Onilol Aug 28 '15 at 18:15
This should fix his problem as the keyup event will enter a zero when the user inputs into an empty field – Oskari Mantere Aug 28 '15 at 18:17

chrismilleruk · Accepted Answer · 2015-08-28T18:28:20.667

1

If you are essentially trying to turn it into a formatted number you could try type coercion:

'' + new Number('')       // "0"
'' + new Number('0')      // "0"
'' + new Number('05')     // "5"
'' + new Number('0000.2') // "0.2"

edited Aug 28 '15 at 18:28

answered Aug 28 '15 at 18:21

chrismilleruk

2,516
2
16
8

score 0 · Answer 3 · answered Aug 28 '15 at 18:15

0

I'm assuming that the text is removed from pressing the backspace key.

If that is the case then you keyup handler would fire when you backspace on the zero, which would detect no input, then add the zero.

answered Aug 28 '15 at 18:15

Philip Read

54
2

Or it could be highlighted and replaced with another key. – Onilol Aug 28 '15 at 18:17
Either way, it will be adding an unintended zero via the handler. – Philip Read Aug 28 '15 at 18:20
I think they are different things , @PhilipRead . As you said, the backspace on keyup detects no input, but highlighting and replacing with another value would detect input. – Onilol Aug 28 '15 at 18:22
That's true. Didn't really think about that. – Philip Read Aug 28 '15 at 18:24

score 0 · Answer 4 · answered Aug 28 '15 at 18:17

0

First of all, you are doing it a hard way. And try this... if the user clicks on the input then it will be cleared and the user can write whatever number he wants...

$( ".input" ).focus(function() {
  (this).val('');
});

answered Aug 28 '15 at 18:17

vs_lala

715
2
8
18

Eshu · Answer 5 · 2015-08-28T18:36:32.343

0

Instead of using keyup and keypress event for checking and replacing blank to zero, use change event.

$(function(){

  calculate();

$('.input').keypress(function (e) {
     //if the letter is not digit then display error and don't type anything
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
               return false;
    }
   });

  $('.input').on('keyup',function(){
    calculate();
  });

$('.input').on('change',function(){
    if($(this).val()==''){
      $(this).val('0');
    }
  });

});

function calculate(){
var d6Val = ($('#d6').val() !== "")? $('#d6').val() : '0';
var d20Val = ($('#d20').val() !== "")? $('#d20').val() : '0';
var e20Val = ($('#e20').val() !== "")? $('#e20').val() : '0';
  var d6 = parseFloat((d6Val).replace(/,/g,''));
  var d20 = parseFloat((d20Val).replace(/,/g,''));
  var b20 = d6;
  var e20 = parseFloat((e20Val).replace(/,/g,''));

  var f20 = d20*e20;
  var f22 = b20/f20;
  var f23 = (52-f22)*f20;

  $('#f20').html(formatCurrency(f20));
  $('#f22').html(f22.toFixed(2));
  $('#f23').html(formatCurrency(f23));

}

function formatCurrency(x) {
    return '$'+x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}

One more thing. Change event only fires when you focus-out from that input.

Please let me know if you will face any issue.

edited Aug 28 '15 at 18:36

answered Aug 28 '15 at 18:18

Eshu

359
1
8

This actually worked. Didn't think of doing that. Thanks! – Damien Aug 28 '15 at 18:21
Just realized that this actually breaks the calculator in that now it's not doing calculations in real-time. I now have to change to another field in order to get a result. Any other ideas? – Damien Aug 28 '15 at 18:25
Damien are you using a html form ? – Onilol Aug 28 '15 at 18:27
Try this: '' + new Number($(this).val()) – chrismilleruk Aug 28 '15 at 18:27
Hey Damien can you share the HTML structure so that i can use your code and do some testing. – Eshu Aug 28 '15 at 18:28
I just update the solution. May be now this will solve your issue. – Eshu Aug 28 '15 at 18:37

score 0 · Answer 6 · answered Aug 28 '15 at 18:35

In case you are using an HTML5 form you can avoid that piece of code like this:

<input type="number" placeholder="Type a number" required>

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out.

Replacing if the first number is a zero and the number is greater than 2 places

6 Answers6