Show string in input field type=number

From WDN Web Docs input type="number"

input elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries.

Sou you can't show a string inside a number typed input.

But you could transform "4'000" to '4000'， and show it as a number:

"4'000".replaceAll("'", "") // => "4000"

<input value="4000" placeholder="Type some numbers" type="number">

So before you add the value on your value field, what you can do is "process" it first to remove all non numeric stuff on the value:

use this function: \D is a shorthand regex that matches all non-digit.

const stripNonNumeric = str => str.replace(/\D/g,'');

(If you are using state)

const [val, setVal] = useState(stripNonNumeric(props.defaultValue));

const onChangeValue = (e) => {
   // this should be unnecessary if the field is already type="number",
   // but if its not then this use this, else just use e.target.value
   const value = stripNonNumeric(e.target);

   setVal(value);
};

return <input type="number" value={val} onChange={onChangeValue} />;

If you are getting your value from somewhere else:

const value = props.valFromSomewhere;

return <input type="number" value={stripNonNumeric(value)} />;

It will be much better to use input type as number for the values which are rational/integers but not strings.

So in your case, you can use text as an input field for better readability and in javascript you can convert that string to a number.

let num = document.getElementById("some-number").value;

num = num.replace(/\'/g,'');
num = parseInt(num,10);

console.log(num);

<input type="text" value="4'000" id="some-number" />