[SOLVED] Remove zero inside input when try to erase

Remove zero inside input when try to erase

I have a react-component which is an input-field of the type number. When I press random numbers inside everything works fine, but when I want to erase everything there is always a zero inside the input-field which I can´t erase. Is is possible to blank out the input-field so that the zero disappear when I erase everything?

My component:

const NumberBox = (props) => {
  const onChanged = (event) => {
    props.onChange(+event.target.value);
  };

  const styles = {
    inputGeneral: {
    border: '0px',
    width: '100%',
    padding: '8px 16px',
    fontSize: '1.6em' } };

  return (
   <input
    style={styles.inputGeneral}
    type="number" 
    pattern="[0-9]*"
    value={props.value}
    onChange={onChanged}
  />);
 };

Solution

This is happening because of the behavior associated with the HTML5 number input type in Chromium (and possibly other browsers, too) ...

The simplest solution should be use text input type and manually validate/format your input...