javascript - Format currency input field with dollar sign & commas - Stack Overflow

admin管理员组

文章数量:1289583

I have a revenue input field in a javascript/jquery form:

1. Need a dollar sign :before
2. add mas as the currency increases

I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the mas. Any suggestions or tips are wele!

HTML:

  <form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
    <br>
  </form>

CSS:

  <style>
      .body {
        text-align: left;
      }
      
      .fields {
        margin: 0 10px 0 0;
      }
      
      .fields:before {
        content: "$";
        text-align: center;
        position: relative;
        left:30px;
      }
      
      #price {
        border-radius: 5px;
        margin: 15px;
        padding: 10px;
        color: black;
      }
    </style>

JS:

<script>
  $('#rev-calculator').on('click', 'button', function(e) {
    e.preventDefault();
    var price = $("#price").val();
    console.log(price);
  })
</script>

codepen:

input field

I have a revenue input field in a javascript/jquery form:

1. Need a dollar sign :before
2. add mas as the currency increases

I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the mas. Any suggestions or tips are wele!

HTML:

  <form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
    <br>
  </form>

CSS:

  <style>
      .body {
        text-align: left;
      }
      
      .fields {
        margin: 0 10px 0 0;
      }
      
      .fields:before {
        content: "$";
        text-align: center;
        position: relative;
        left:30px;
      }
      
      #price {
        border-radius: 5px;
        margin: 15px;
        padding: 10px;
        color: black;
      }
    </style>

JS:

<script>
  $('#rev-calculator').on('click', 'button', function(e) {
    e.preventDefault();
    var price = $("#price").val();
    console.log(price);
  })
</script>

codepen: https://codepen.io/kedarPE/pen/JjroYyb

input field

• javascript
• html
• jquery
• css
• formatting

Share Improve this question Follow asked Nov 30, 2021 at 20:54 KedarKedar 3511 gold badge22 silver badges77 bronze badges 2

• 2 The browser decides how to render the number input, you cant add text such as mas to it. And what's wrong with the dollar sign? – skara9 Commented Nov 30, 2021 at 21:03
• Maybe see this for ma workaround stackoverflow./questions/49681785/… – skara9 Commented Nov 30, 2021 at 21:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Well here's a way, though in truth not as simple as I hoped when I started down this path. You can use Intl.NumberFormat to get the ma in there (according to locale). To acodate decimals, I sniff for them in the beginning and append them to the result.

To allow for the ma, I made this a text field with a pattern attribute. Also, I adjusted your CSS to make it a little nicer looking with the $

@carlos has a good ment below which I've incorporated into my answer.

$('#price').keyup(function(e) {
    let parts = $(this).val().split(".");
    let v = parts[0].replace(/\D/g, ""),
      dec = parts[1]
    let calc_num = Number((dec !== undefined ? v + "." + dec : v));
    // use this for numeric calculations
    // console.log('number for calculations: ', calc_num);
    let n = new Intl.NumberFormat('en-EN').format(v);
    n = dec !== undefined ? n + "." + dec : n;
    $(this).val(n);
 
})

.body {
  text-align: left;
}

.fields {
  margin: 0 10px 0 0;
}

.fields:before {
  content: "$";
  text-align: center;
  position: relative;
  left: 35px;
}

#price {
  border-radius: 5px;
  margin: 15px;
  padding: 10px 10px 10px 20px;
  color: black;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="text" pattern="[0-9.,]+" name="price" id="price" required data-type="number" />
    <br>
</form>

Just adding to @Kinglish's answer, here's an improved version of the code.

document.querySelector('#price').addEventListener('input', function (e) {
  const parts = e.target.value.split('.');
  const value = parts[0].replace(/\D/g, '');
  const decimal = parts[1];

  let newValue = new Intl.NumberFormat('en-EN').format(value);

  // Prevent non-numeric decimal
  if (!isNaN(decimal)) {
    newValue = `${newValue}.${decimal}`;
  }

  // Prevent placing 0 when empty
  e.target.value =
    value === '' && newValue === '0' ? '' : newValue;
})

<input type="text" id="price" placeholder="Price" />

I'm surprised the unique answer for this issue has a lot of votes because it has a tiny but major flaw: the event shouldn't be keydown, it should be keyup. If you use keydown, it won't read the keys you are pressing at the moment but the previous one. So, please update your answer.

本文标签： javascriptFormat currency input field with dollar sign amp commasStack Overflow