Kevin Powell - Community•2mo ago

How to change live input for input="text"?

To be more specific, if a user is typing something, I need to slightly change his input after specific requirements are met. Requirements are these: 1)Input="text" needs to only take numbers. Nothing else is permitted. 2)If first character user enters is "0" nothing is shown in input field. 3)When he enters his 4th number, "," is auto added in front of the first digit. Ex: "1,000" 4)Every next number moves comma to the next digit Ex: "10,000" ; "100,000" 5) When 7 digit number is typed, new comma is added in front of the first digit Ex: "1,000,000" 6)Repeat all that to the infinity

19 Replies

ἔρως•2mo ago

show us what you have so far

DovahOP•2mo ago

Nothing. I don't know how to change live input. xD Hence why I'm here So I type "1000" in input field, and my code needs to auto change it to "1,000" as 4th digit is entered.

ἔρως•2mo ago

there's the input event you can do all the formatting after the user stops typing you can listen to keypresses with keypress or keydown

DovahOP•2mo ago

I'm aware about events, I just don't know how to format it to do what I need it to do. Nor how to limit input="text" to only take numbers

ἔρως•2mo ago

with those events, you can detect the pressed key and contents of the field

MarkBoots•2mo ago

think this should do

const inputEl = document.querySelector('input');
inputEl.addEventListener('input', handleInput);

function handleInput(e){
  const nr = Number(e.target.value.replace(/\D/g, ''));
  e.target.value = nr ? nr.toLocaleString('en-US'): '';
}

const inputEl = document.querySelector('input');
inputEl.addEventListener('input', handleInput);

function handleInput(e){
  const nr = Number(e.target.value.replace(/\D/g, ''));
  e.target.value = nr ? nr.toLocaleString('en-US'): '';
}

example https://codepen.io/MarkBoots/pen/abeENYq

Mark Boots

CodePen

Untitled

...

clevermissfox•2mo ago

const input = document.querySelector('input[type=text]');
const number = Number(input.value); // or use +inputValue
const formattedNumber = number.toLocaleString('en-US');
console.log(formattedNumber); // Output: "100,000"

const input = document.querySelector('input[type=text]');
const number = Number(input.value); // or use +inputValue
const formattedNumber = number.toLocaleString('en-US');
console.log(formattedNumber); // Output: "100,000"

But remember this is still a string like it was when the user entered it into the input so any calculations if needed should be made after converting to a number and before converting back to a string

MarkBoots•2mo ago

- this won't take care of non-digit characters. Number('123ab') will return NaN. That's why i remove all other characters first. - Also if the input is empty, toLocaleString("") will return 0. so i check for that with the ternary

clevermissfox•2mo ago

I wasn't submitting a full solution just an additional way for formatting the end result since other comments had taken care of the rest.
I must've missed something as I only saw the regex in your reply so was just giving another option on how to include the comma . Obviously this would do nothing for steps 1 or 2. Shouldve qualified that

MarkBoots•2mo ago

ah okay, fair 🖖

clevermissfox•2mo ago

I just read that back and hope I didn’t come off any kind of way , been doing 3 things at once all day. I didn’t read thoroughly for the first comment , just skimmed and wanted to make sure op knew about the string formatting as I was so excited when I came across it 😆 Then the second comment didn’t really come across the way I intended. Trying to be less verbose too but I’m falling short on how to get to the point but also not sound curt. So much for not being king winded 😆 but yeah just wanted to tack on to make sure the option was brought to their attention for formatting . The rest of you guys seemed to have it all covered just missed that you had included .toLocaleString already ✨

MarkBoots•2mo ago

no worries at all, I didn't take it bad at all. I/we know you're one of the kind ones over here 😉

DovahOP•2mo ago

Damn ya'll cooked! 😂 I finally got free time so I'll check the solutions in the evening later and will come back with more info! Thanks a lot But oh my god, if there was already a function implemented that does the formating I'm gonna fume. 😭 I really need to start chatting with hot AI GF chatGPT for stuff like that, but I prefere this way of learning much more.

ἔρως•2mo ago

if you don't know what you're doing, this won't help

DovahOP•2mo ago

Yup. That is exactly it. Thanks a lot! You always come clutch here. xD @MarkBoots One quick question if possible! How would I tweak that function to allow me decimal numbers only? So no US formating nad to allow me to type stuff like "0.25", "5.25", "10.25" ? They should not be able to type ".25", it must have number in front from 0-9. And it should only be 4 digits at max, but I guess I can set that with "maxlenght" in HTML

MarkBoots•2mo ago

it's already decimal numbers only. it only accepts digits (so no points)

DovahOP•2mo ago

@MarkBoots Wait but I'm unable to type stuff like "0.25" and such?

MarkBoots•2mo ago

ohw sorry, I misread maybe something like this I've updated the pen

const inputEl = document.querySelector('input');
inputEl.addEventListener('input', handleInput)
inputEl.addEventListener('blur', handleInput)

function handleInput(e){
  const nr = e.target.value
    .replace(/[^0-9.]/g, '')        // Remove any character that isn't a digit or a decimal point
    .replace(/(\..*)\./g, '$1')     // Keep only the first decimal point
    .replace(/^\./, '0.');          // If input starts with a decimal point, replace it with '0.'
  e.target.value = nr

  // there could still be a decimal point at the end, without decimals. So when leaving the input (blur), remove it
  if(e.type === 'blur'){
    e.target.value = nr.replace(/\.$/, '') // If last character is a decimal point, remove
  }
}

const inputEl = document.querySelector('input');
inputEl.addEventListener('input', handleInput)
inputEl.addEventListener('blur', handleInput)

function handleInput(e){
  const nr = e.target.value
    .replace(/[^0-9.]/g, '')        // Remove any character that isn't a digit or a decimal point
    .replace(/(\..*)\./g, '$1')     // Keep only the first decimal point
    .replace(/^\./, '0.');          // If input starts with a decimal point, replace it with '0.'
  e.target.value = nr

  // there could still be a decimal point at the end, without decimals. So when leaving the input (blur), remove it
  if(e.type === 'blur'){
    e.target.value = nr.replace(/\.$/, '') // If last character is a decimal point, remove
  }
}

DovahOP•2mo ago

Ok damn that looks more complicated than I thought. Will need to digest it properly! Thanks a lot for all the solutions!

Gaming

Programming

How to change live input for input="text"?