如果第一个数字为零且该数字大于2位，则替换

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, ",");
}

Answer 1

更改调零代码以使用blur（）事件，即当该字段失去焦点时。

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

Answer 2

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.

Answer 3

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"

Answer 4

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.

Answer 5

well maybe this will do.

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

    });

Answer 6

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('');
});

Answer 7

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.