How can I add a comma to a number input field when the numbers reach one thousand?

When setting the minimum and maximum prices of products, I encountered an issue where entering 10.000 displayed as 10000. To automatically add a decimal point to numbers and display it correctly as 10.000, I attempted the following solutions:

<input type="number" step="0.01">
<input type="number" step=".01">
<input type="number" step="any">

Unfortunately, none of these methods were successful in resolving the problem.

Answer №1

Check out this code snippet for implementing a text field that only accepts numeric input:

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input.numeric').forEach(el => el.addEventListener('input', e => {
    let n = e.target.value.replaceAll(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    e.target.value = n;
  }))
})
<input type="text" class='numeric'>

Answer №2

Here is a solution that might be of assistance.

document.querySelector("input")
.addEventListener("change", e => {
  e.target.value = parseFloat(e.target.value)
      .toFixed(3);
});
<input type="number" value="0.000" step="0.001">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to check if a user has previously visited a URL and automatically redirect them back to that page if they have

I'm looking for a way to detect if a user has already opened a specific link or URL in their browser tab. Is it possible to redirect the link to an active tab if the URL is already open? For example, if a user clicks on a link and JS code opens a new ...

Unable to get table borders to display correctly using CSS styling

Can someone lend me a hand with a CSS issue I'm facing? I want to create some CSS "classes" for tables in my form, but I can only get the borders to display correctly on one of the tables. Here is the code I've been using: table.paddedTable tabl ...

Failure of app script to retrieve data from an external spreadsheet

In an attempt to consolidate data, this program aims to transfer information from one spreadsheet to another. The process involves retrieving all files within a designated folder (all of which are spreadsheets), extracting values from a specific range, and ...

Toggle button in React following a list iteration

Upon receiving data from an API call to Google Books, I want to hide the description paragraphs and implement a toggle button using the "hidden" CSS class from Tailwind CSS. Currently, I am just logging the elements on the "view description" button and uns ...

Guide to embedding CSS into a DOC file generated from HTML with PHP

I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...

How can Array.map() be combined with D3 selection?

Is there a way to calculate the maximum length of text elements in an SVG selection similar to using Array.map()? Currently, I am retrieving the maximum length of a selection of SVG <text/> elements by utilizing .selectAll(...)[0].map(...), but it fe ...

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

My app includes several routerLinks that I have styled using [routerLinkActive]="['active']". Everything works perfectly when I click on one of the routerLinks to navigate. However, when I try to navigate using: this._router.navigate( [ thisUrl ...

Limit of 10 Discord.js Webhooks per channel

Whenever a user sends a message, a webhook updates its name to display the message author's username. However, sometimes due to errors, the webhook creates multiple instances and continues to show the names of the message authors. Is there a way to e ...

Is there a way to prevent certain folders that have .vue files from being included in the VueJS build process?

https://i.sstatic.net/YU1rB.png module.exports = { presets: [ '@vue/app' ], module:{ rules: [ { test: /\.vue$/, exclude: [ './src/components/Homepages/number1', './src ...

serverless with Node.js and AWS encountering a 'TypeError' with the message 'callback is not a function'

Within my handler.js file, I am utilizing the getQuotation() function from the lalamove/index.js file by passing the string "hi" as an argument. 'use strict'; var lalamove = require('./lalamove/index.js'); module.exports.getEstimate = ...

Is there a way to modify the appearance of blocks in Scratch/Blockly?

I am currently working on customizing the appearance of the blocks in Scratch by looking into adjusting the GitHub repository of scratch-blocks (https://github.com/LLK/scratch-blocks). There is a chance that I might need to modify the GitHub repository of ...

Incorporating local JSON data into HTML: A Step-by-Step

I'm completely new to javascript and the utilization of json. What I want to accomplish is quite straightforward, although I am encountering difficulties. My objective is to create a website consisting of two pages: one that showcases artists and ano ...

Do we really need TypeScript project references when transpiling with Babel in an Electron project using Webpack?

Currently, I am in the process of setting up my project configuration and have not encountered any errors so far. However, based on my understanding of the Typescript documentation... It appears that Project references are not essential when using babel-l ...

Avoiding triggering the parent event from the child in React

I'm facing a situation where clicking on a parent element results in it flipping to display a child element with different colors. However, the issue arises when the user tries to click on one of the colors in the child element, as it also triggers th ...

How can I trigger a function after all nested subscriptions are completed in typescript/rxjs?

So I need to create a new user and then create two different entities upon success. The process looks like this. this.userRepository.saveAsNew(user).subscribe((user: User) => { user.addEntity1(Entity1).subscribe((entity1: EntityClass) => {}, ...

Using jQuery to alter hover color using a dynamic color picker

I'm looking to update the hover color using a color picker tool. Here are the methods I've attempted: // Initial Attempt $("input[type=color]").change(function(e) { var selectedColor = e.target.value; // $("body").css("background-color ...

Having trouble with npm global installation? Encountering the error message "Error: EACCES: permission denied

As the administrator of my MacBook, I am facing an issue while trying to run a npm command in my Django project. It is refusing to run due to missing permissions. (venv) jonas@Air-von-Jonas salaryx % npm install -g sass npm ERR! code EACCES npm ERR! syscal ...

Creating a custom PHP webpage and integrating it with a WordPress theme

I'm looking to develop a unique php and javascript page that is integrated with my existing Wordpress theme. Can anyone provide guidance on how to achieve this? Appreciate the help! ...

Using PHP to redirect upon clicking a link

My issue involves directing users to another page or form and saving the button they click as a value when selecting a CRN (course number). <table class="table table-bordered table-hover table-striped"> <thead> ...

Most efficient method for comparing two JSON arrays and rearranging their positions

I am faced with a challenge involving two Javascript JSON arrays. The arrays in question are named this.BicyclePartsOLD and this.BicyclePartsNEW. Both arrays contain an attribute named "ListOrder". The OLD array is currently ordered from ListOrder 1 to n ...