HTML input field that will post a whole number but display with commas

Question

I need an input field that matches the following criteria, I have looked at input masks but can't seem to find one that fits my needs! Any pointers would be much appreciated!

The field is for submitting a currency in whole numbers. I would like commas added in as the user is typing (or for it to accept properly placed commas) eg. 1,000,000, 1,000 etc.

It also needs to either not allow decimal places or automatically add .00 to the end.

Then when the PHP form is posted it needs to post only the whole number (or with the .00 on the end is fine!).

Does anybody have an idea how I could achieve this? Live validation would be best rather than waiting until submit. :)

There is server checks for the correct format so don't need to worry much about somebody without JS submitting bad input.

I have tried HTML5 number input with step as 1 but this still allows me to type decimals in and will even submit. I assume this is just for the arrows!

This is not a code writing service. What have you tried? Where is the work you have done to solve this that you need help with? — gforce301, Jan 11 '18 at 16:15
@gforce301 I have used this on the field, the currency one works well but I need to block people from adding anything other than .00 in decimal. http://robinherbots.github.io/Inputmask/ The field as it stands is just a text field now, not much use sharing code for that! — Adam, Jan 11 '18 at 16:17
@Adam I'm feeling rather snarky today. How hard did you really search/look for an answer? I put this "javascript format number input" in google and found this: https://stackoverflow.com/questions/19470499/how-to-format-input-box-text-as-i-am-typing-it in 2 seconds. So... see my first comment. — gforce301, Jan 11 '18 at 16:22

Alexis Vandepitte · Accepted Answer · 2018-01-11T17:30:10.673

Working Example

It could be improved. I think it would be a nice thing to detect if the user press the left arrow or right arrow to change a number because of a mistake, and to not reset the cursor just before the ".00" and let him go where he wants.

(codepen: https://codepen.io/Alvan/pen/wpjJop)

// Optionnal
$('input').val('.00');

$('input').on('click', function(){
  var val = $(this).val();
  
  // If the user hasn't start to fill the input, set the cursor position to 0
  if(val.replace('.00', '').length === 0) {
    $(this)[0].setSelectionRange(0, 0);
  }
});
// Ebd Optionnal

$('input').on('keyup', function(){
  var val = $(this).val();
  
  
  val = val.replace('.00', '') // Replace the ".00" that we automatically add
           .toString() 
           .replace(/\D/g,'') // Replace all that is not a number by nothing
           .replace(/,/g, "") // Replace privous comma by nothing
           .replace(/\B(?=(\d{3})+(?!\d))/g, ",")+'.00'; // And here the magic i don't really understand, but comes from a link that i send you ^^.
  
  // Set the new val
  $(this).val(val);
  
  // Now we want the cursor to be before the ".00", so we get the length minus the length of ".00", so 3
  var strLength = val.length - 3;
  
  // Be sure to focus the input
  $(this).focus();
  
  // Set the focus before the ".00"
  $(this)[0].setSelectionRange(strLength, strLength);
  
  // And voila !
});

body {
  background: #161616;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
}

input {
  width: 500px;
  height: 50px;
  border: 0;
  padding: 0 10px;
  font-size: 20px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

HTML input field that will post a whole number but display with commas

1 Answers1

Working Example